How to use react-share - 10 common examples

"use strict";
var React      = require("react"),
    ReactShare = require("react-share");

var ShareButtons = ReactShare.ShareButtons;
var FacebookShareButton = ShareButtons.FacebookShareButton;
var TwitterShareButton = ShareButtons.TwitterShareButton;
var GooglePlusShareButton = ShareButtons.GooglePlusShareButton;

var generateShareIcon = ReactShare.generateShareIcon;
var FacebookIcon = generateShareIcon('facebook');
var TwitterIcon = generateShareIcon('twitter');
var GooglePlusIcon = generateShareIcon('google');

var url = window.location.href;
var title = "Online Budget Analysis Tool";

var tempArray = url.split("#");
var embedString = "#/embed";
var embedUrl = tempArray[0] + embedString + tempArray[1];

export default (props) => {
  const FacebookIcon = generateShareIcon('facebook');
  const TwitterIcon = generateShareIcon('twitter');
  const LinkedinIcon = generateShareIcon('linkedin');
  const TelegramIcon = generateShareIcon('telegram');
  const RedditIcon = generateShareIcon('reddit');
  const projectName = props.projectName;
  const title = `Stats and Transparency score for ${projectName}`;
  const description = `Explore real time stats on raised funds, 
  tokens and investors in ${projectName} and review comprehensive 
  transparency score based on ${projectName} smart contracts code.`;

  const {
    FacebookShareButton,
    LinkedinShareButton,
    TwitterShareButton,
    TelegramShareButton,
    RedditShareButton,

)
    } else {
      const directionMode = true
      const {
        FacebookShareButton,
        GooglePlusShareButton,
        LinkedinShareButton,
        TwitterShareButton,
        PinterestShareButton,
        VKShareButton
      } = ShareButtons
      const FacebookIcon = generateShareIcon('facebook')
      const TwitterIcon = generateShareIcon('twitter')
      const LinkedinIcon = generateShareIcon('linkedin')
      const { shareInfo } = this.props
      const shareIconSize = 32

      const { detail } = this.props.post
      const { content } = detail
      const files = typeof detail.file !== 'undefined'
        ? JSON.parse(detail.file)
        : []

      const detailClass = classNames('content', { hide: !detail.id })

      const finalContent = this.parseContent(content)

      const eventDate = (detail.startDate === detail.endDate)
      ? toShortDate(detail.endDate)
      : toShortDate(detail.startDate) + ' - ' + toShortDate(detail.endDate)

import React from 'react';
import { PropTypes } from 'prop-types';
import { ShareButtons, generateShareIcon } from 'react-share';

import { SiteConf } from 'base';
import styles from './styles.css';

const { FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton, EmailShareButton, GooglePlusShareButton } = ShareButtons;
const FacebookIcon = generateShareIcon('facebook');
const TwitterIcon = generateShareIcon('twitter');
const LinkedinIcon = generateShareIcon('linkedin');
const WhatsappIcon = generateShareIcon('whatsapp');
const GooglePlusIcon = generateShareIcon('google');
const EmailIcon = generateShareIcon('email');

const propTypes = {
  post: PropTypes.object.isRequired
};

const SharePost = ({ post }) => {

  const postUrl = `${ SiteConf.BlogUrl }/${ post.slug }`;
  const shareTitle = `${ post.title } @ ${ SiteConf.BlogTitle }`; 
  
  return (

render() {
    if (!this.props.challenge) {
      return null
    }

    const {
      FacebookShareButton,
      TwitterShareButton,
      EmailShareButton,
    } = ShareButtons

    const FacebookIcon = generateShareIcon('facebook')
    const TwitterIcon = generateShareIcon('twitter')
    const EmailIcon = generateShareIcon('email')

    const shareUrl = `${process.env.REACT_APP_URL}/browse/challenges/${this.props.challenge.id}`
    const title = process.env.REACT_APP_TITLE
    const hashtag = 'maproulette'

    return (
      <div>
        <div>
          
            <span>
              
            </span>
          
        </div>
</div>

].map(({ Component, iconName }, index) => (
      
    ));

FacebookShareButton,
      GooglePlusShareButton,
      LinkedinShareButton,
      TwitterShareButton,
      TelegramShareButton,
      WhatsappShareButton,
      PinterestShareButton,
      VKShareButton,
      OKShareButton,
      RedditShareButton,
      TumblrShareButton,
      LivejournalShareButton,
      EmailShareButton,
    } = ShareButtons;
  
    const FacebookIcon = generateShareIcon('facebook');
    const TwitterIcon = generateShareIcon('twitter');
    const GooglePlusIcon = generateShareIcon('google');
    const LinkedinIcon = generateShareIcon('linkedin');
    const PinterestIcon = generateShareIcon('pinterest');
    const VKIcon = generateShareIcon('vk');
    const OKIcon = generateShareIcon('ok');
    const TelegramIcon = generateShareIcon('telegram');
    const WhatsappIcon = generateShareIcon('whatsapp');
    const RedditIcon = generateShareIcon('reddit');
    const TumblrIcon = generateShareIcon('tumblr');
    const MailruIcon = generateShareIcon('mailru');
    const EmailIcon = generateShareIcon('email');
    const LivejournalIcon = generateShareIcon('livejournal');
  
    const shareTitle = `${post.json_metadata.title} - Hede.io`
    const shareUrl = "https://hede.io/" + post.url;

import { Component } from 'react'
import PropTypes from 'prop-types'
import { ShareButtons, generateShareIcon } from 'react-share'

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

const propTypes = {
  description: PropTypes.string,
  imgUrl: PropTypes.string.isRequired,
  shareUrl: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
}

class PostShareWidget extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { description, imgUrl, shareUrl, title } = this.props
    return (

TumblrShareButton,
      LivejournalShareButton,
      EmailShareButton,
    } = ShareButtons;
  
    const FacebookIcon = generateShareIcon('facebook');
    const TwitterIcon = generateShareIcon('twitter');
    const GooglePlusIcon = generateShareIcon('google');
    const LinkedinIcon = generateShareIcon('linkedin');
    const PinterestIcon = generateShareIcon('pinterest');
    const VKIcon = generateShareIcon('vk');
    const OKIcon = generateShareIcon('ok');
    const TelegramIcon = generateShareIcon('telegram');
    const WhatsappIcon = generateShareIcon('whatsapp');
    const RedditIcon = generateShareIcon('reddit');
    const TumblrIcon = generateShareIcon('tumblr');
    const MailruIcon = generateShareIcon('mailru');
    const EmailIcon = generateShareIcon('email');
    const LivejournalIcon = generateShareIcon('livejournal');
  
    const shareTitle = `${post.json_metadata.title} - Hede.io`
    const shareUrl = "https://hede.io/" + post.url;

    return (
      <div>
        {isModerator &amp;&amp; !reviewed || alreadyChecked ? <div>

          {!alreadyChecked &amp;&amp; isModerator &amp;&amp; <h3>
            Review Entry
            <br>
          </h3>}
</div></div>

FacebookShareButton,
      GooglePlusShareButton,
      LinkedinShareButton,
      TwitterShareButton,
      TelegramShareButton,
      RedditShareButton
    } = ShareButtons;
    const {
      FacebookShareCount,
      GooglePlusShareCount,
      LinkedinShareCount,
      RedditShareCount
    } = ShareCounts;

    const FacebookIcon = generateShareIcon("facebook");
    const TwitterIcon = generateShareIcon("twitter");
    const TelegramIcon = generateShareIcon("telegram");
    const GooglePlusIcon = generateShareIcon("google");
    const LinkedinIcon = generateShareIcon("linkedin");
    const RedditIcon = generateShareIcon("reddit");
    const iconSize = mobile ? 36 : 48;
    const filter = count => (count > 0 ? count : "");

    return (
      <div>
        
          
          
            {count =&gt;
              <div>
                {filter(count)}
              </div>}</div>