import React from 'react';

import PropTypes from 'prop-types';

import { ShareButtons, generateShareIcon } from 'react-share';

// import { addthis } from '../../../data/config';

// import { refreshToolBox } from '../../api/addthis';

const {
  FacebookShareButton,
  TwitterShareButton,
  TelegramShareButton,
  WhatsappShareButton,
} = ShareButtons;

const FacebookIcon = generateShareIcon('facebook');
const TwitterIcon = generateShareIcon('twitter');
const TelegramIcon = generateShareIcon('telegram');
const WhatsappIcon = generateShareIcon('whatsapp');

const ShareBox = ({ url }) => (
  <div>
    <FacebookShareButton
      url={url}
      className="d-inline-block"
    >
      <FacebookIcon
        size={32}
        round
      />
    </FacebookShareButton>

    <TwitterShareButton
      url={url}
      className="d-inline-block"
    >
      <TwitterIcon
        size={32}
        round
      />
    </TwitterShareButton>
    <TelegramShareButton
      url={url}
      className="d-inline-block"
    >
      <TelegramIcon
        size={32}
        round
      />
    </TelegramShareButton>
    <WhatsappShareButton
      url={url}
      className="d-inline-block"
    >
      <WhatsappIcon
        size={32}
        round
      />
    </WhatsappShareButton>
  </div>
);

ShareBox.propTypes = {
  url: PropTypes.string.isRequired,
};

export default ShareBox;

import React from 'react';

import PropTypes from 'prop-types';

import { ShareButtons, generateShareIcon } from 'react-share';

// import { addthis } from '../../../data/config';

// import { refreshToolBox } from '../../api/addthis';

const { FacebookShareButton, TwitterShareButton } = ShareButtons;
const FacebookIcon = generateShareIcon('facebook');
const TwitterIcon = generateShareIcon('twitter');

const ShareBox = ({ url }) => (
  <div>
    <FacebookShareButton
      url={url}
      className="d-inline-block"
    >
      <FacebookIcon
        size={32}
        round
      />
    </FacebookShareButton>
    <TwitterShareButton
      url={url}
      className="d-inline-block"
    >
      <TwitterIcon
        size={32}
        round
      />
    </TwitterShareButton>
  </div>
);

ShareBox.propTypes = {
  url: PropTypes.string.isRequired,
};

export default ShareBox;

--- 
+++ 
@@ -8,9 +8,17 @@
 
 // import { refreshToolBox } from '../../api/addthis';
 
-const { FacebookShareButton, TwitterShareButton } = ShareButtons;
+const {
+  FacebookShareButton,
+  TwitterShareButton,
+  TelegramShareButton,
+  WhatsappShareButton,
+} = ShareButtons;
+
 const FacebookIcon = generateShareIcon('facebook');
 const TwitterIcon = generateShareIcon('twitter');
+const TelegramIcon = generateShareIcon('telegram');
+const WhatsappIcon = generateShareIcon('whatsapp');
 
 const ShareBox = ({ url }) => (
   <div>
@@ -23,6 +31,7 @@
         round
       />
     </FacebookShareButton>
+
     <TwitterShareButton
       url={url}
       className="d-inline-block"
@@ -32,6 +41,24 @@
         round
       />
     </TwitterShareButton>
+    <TelegramShareButton
+      url={url}
+      className="d-inline-block"
+    >
+      <TelegramIcon
+        size={32}
+        round
+      />
+    </TelegramShareButton>
+    <WhatsappShareButton
+      url={url}
+      className="d-inline-block"
+    >
+      <WhatsappIcon
+        size={32}
+        round
+      />
+    </WhatsappShareButton>
   </div>
 );
 
Add Telegram and Whatsapp Share Button
