STEP-10 SocialShare Component Development

And we ready to develop our SocialShare component

STEP-10

1. We need to add react share package, for that modifying your extension package.json

scandipwa/packages/scandipwa-socialshare/package.json

{
   "name": "scandipwa-socialshare",
   "version": "0.0.1",
   "license": "OSL-3.0",
   "scandipwa": {
       "type": "extension"
   },
   "dependencies": {
       "react-share": "4.4.0"
   },
   "eslintConfig": {
       "extends": "@scandipwa"
   }
}

2. Run npm install at theme folder, in order to pull packages, then restart frontend

3. Create SocialShare.config.js in SOURCE/component/SocialShare

scandipwa-socialshare/src/component/SocialShare/SocialShare.config.js

export const FACEBOOK = 'facebook';
export const FACEBOOK_MSG = 'facebook_messenger';
export const TELEGRAM = 'telegram';
export const WHATSAPP = 'whatsapp';
export const LINKEDIN = 'linkedin';
export const EMAIL = 'email';

4. Modify SocialShare.component.js

scandipwa-socialshare/src/component/SocialShare/SocialShare.component.js

import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import {
   EmailIcon,
   EmailShareButton,
   FacebookIcon,
   FacebookMessengerIcon,
   FacebookMessengerShareButton,
   FacebookShareButton,
   FacebookShareCount,
   LinkedinIcon,
   LinkedinShareButton,
   TelegramIcon,
   TelegramShareButton,
   WhatsappIcon,
   WhatsappShareButton
} from 'react-share';

import {
   EMAIL,
   FACEBOOK,
   FACEBOOK_MSG,
   LINKEDIN,
   TELEGRAM,
   WHATSAPP
} from './SocialShare.config';

import './SocialShare.style';

/** @namespace ScandipwaSocialshare/Component/SocialShare/Component/SocialShareComponent */
export class SocialShareComponent extends PureComponent {
   static propTypes = {
       providers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
       size: PropTypes.string.isRequired,
       isRounded: PropTypes.bool.isRequired,
       quote: PropTypes.string.isRequired
   };

   renderMap = {
       [FACEBOOK]: {
           render: (counter, additional, shareUrl) => this.renderFaceBook(counter, additional, shareUrl)
       },
       [EMAIL]: {
           render: (counter, additional, shareUrl) => this.renderEmail(counter, additional, shareUrl)
       },
       [FACEBOOK_MSG]: {
           render: (counter, additional, shareUrl) => this.renderMessenger(counter, additional, shareUrl)
       },
       [TELEGRAM]: {
           render: (counter, additional, shareUrl) => this.renderTelegram(counter, additional, shareUrl)
       },
       [WHATSAPP]: {
           render: (counter, additional, shareUrl) => this.renderWhatsApp(counter, additional, shareUrl)
       },
       [LINKEDIN]: {
           render: (counter, additional, shareUrl) => this.renderLinkedIn(counter, additional, shareUrl)
       }
   };

   renderLinkedIn(counter, additional, shareUrl) {
       const { size, isRounded } = this.props;

       return (
           <LinkedinShareButton
             url={ shareUrl }
           >
               <LinkedinIcon
                 size={ size }
                 round={ isRounded }
               />
           </LinkedinShareButton>
       );
   }

   renderFaceBook(counter, _, shareUrl) {
       const { size, isRounded, quote } = this.props;

       return (
           <>
               <FacebookShareButton
                 url={ shareUrl }
                 quote={ quote }
               >
                   <FacebookIcon
                     size={ size }
                     round={ isRounded }
                   />
               </FacebookShareButton>
               { this.renderFaceBookCounter(counter, shareUrl) }
           </>
       );
   }

   renderMessenger(counter, additional, shareUrl) {
       const { size, isRounded } = this.props;

       return (
           <FacebookMessengerShareButton
             url={ shareUrl }
             appId={ additional }
           >
               <FacebookMessengerIcon
                 size={ size }
                 round={ isRounded }
               />
           </FacebookMessengerShareButton>
       );
   }

   renderTelegram(counter, additional, shareUrl) {
       const { size, isRounded, quote } = this.props;

       return (
           <TelegramShareButton
             url={ shareUrl }
             title={ quote }
           >
               <TelegramIcon
                 size={ size }
                 round={ isRounded }
               />
           </TelegramShareButton>
       );
   }

   renderWhatsApp(counter, additional, shareUrl) {
       const { size, isRounded, quote } = this.props;

       return (
           <WhatsappShareButton
             url={ shareUrl }
             title={ quote }
             separator=" | "
           >
               <WhatsappIcon
                 size={ size }
                 round={ isRounded }
               />
           </WhatsappShareButton>
       );
   }

   // Counter is not working for now https://github.com/nygardk/react-share/issues/347
   // TODO: Update package when issue will be fixed
   renderFaceBookCounter(counter, shareUrl) {
       if (!counter) {
           return null;
       }

       return (
           <FacebookShareCount url={ shareUrl }>
               { (count) => count }
           </FacebookShareCount>
       );
   }

   renderEmail(counter, additional, shareUrl) {
       const { size, isRounded, quote } = this.props;

       return (
           <EmailShareButton
             url={ shareUrl }
             subject={ `${additional} | ${quote}` }
           >
               <EmailIcon size={ size } round={ isRounded } />
           </EmailShareButton>
       );
   }

   renderProvider(provider) {
       const shareUrl = window.location.href;
       const { id, counter, additional } = provider;
       const { render } = this.renderMap[id];

       return (
           <div block="SocialShare" elem="Provider">
               { render(counter, additional, shareUrl) }
           </div>
       );
   }

   render() {
       const { providers } = this.props;

       return (
           <div block="SocialShare">
               { providers.map((provider) => this.renderProvider(provider)) }
           </div>
       );
   }
}

export default SocialShareComponent;

5. Modify SocialShare.style.scss

.SocialShare {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-around;

   &-Provider {
       margin-right: 10px;
   }
}

6. Go to you Frontend and check the result

Mobile

Desktop