react-share

What is react-share?

The react-share npm package provides a collection of social media share buttons and share counts for React applications. It supports a wide range of social media platforms and allows for easy integration of sharing functionalities.

What are react-share's main functionalities?

Facebook Share Button

This feature allows you to create a Facebook share button with a customizable icon. The button can be used to share a specified URL on Facebook.

import { FacebookShareButton, FacebookIcon } from 'react-share';

const FacebookShare = () => (
  <FacebookShareButton url={'https://example.com'}>
    <FacebookIcon size={32} round={true} />
  </FacebookShareButton>
);

Twitter Share Button

This feature allows you to create a Twitter share button with a customizable icon. The button can be used to share a specified URL and title on Twitter.

import { TwitterShareButton, TwitterIcon } from 'react-share';

const TwitterShare = () => (
  <TwitterShareButton url={'https://example.com'} title={'Check this out!'}>
    <TwitterIcon size={32} round={true} />
  </TwitterShareButton>
);

LinkedIn Share Button

This feature allows you to create a LinkedIn share button with a customizable icon. The button can be used to share a specified URL on LinkedIn.

import { LinkedinShareButton, LinkedinIcon } from 'react-share';

const LinkedinShare = () => (
  <LinkedinShareButton url={'https://example.com'}>
    <LinkedinIcon size={32} round={true} />
  </LinkedinShareButton>
);

Share Count

This feature allows you to display the share count for a specified URL on Facebook. Similar components are available for other social media platforms.

import { FacebookShareCount } from 'react-share';

const FacebookShareCountExample = () => (
  <FacebookShareCount url={'https://example.com'} />
);

Other packages similar to react-share

react-social-sharing

The react-social-sharing package provides a set of social media sharing buttons for React applications. It supports fewer platforms compared to react-share but offers a simpler API and easier customization options.

react-social-icons

The react-social-icons package offers a collection of social media icons that can be used for sharing purposes. It focuses more on providing a wide range of icons rather than the sharing functionality itself, making it a good complement to other sharing packages.

react-share-buttons

The react-share-buttons package provides a set of customizable share buttons for various social media platforms. It offers similar functionalities to react-share but with a different set of customization options and styling capabilities.

README

react-share

Easy social media share buttons and share counts.

Features:

• open popup-share window
• share counts from most popular social media sites
• use custom icons or generate de-facto social media icons

See demos/demo0 for a concrete example.

Install

npm install react-share --save

Compatibility

Compatible with React versions 0.13.x and 0.14.x.

API

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

Share buttons

const {
  FacebookShareButton,
  GooglePlusShareButton,
  LinkedinShareButton,
  TwitterShareButton
} = ShareButtons;

Required props for all:

• children: A React node (e.g. string or element)
• url: URL of the shared page (string)

Required props for LinkedinShareButton, TwitterShareButton and FacebookShareButton:

• title: Title of the shared page (string)

Share counts

const {
  FacebookShareCount,
  GooglePlusShareCount,
  LinkedinShareCount,
  TwitterShareCount
} = ShareCounts;

All share count components take in only one mandatory prop: url, which is the URL you are sharing. className prop is optional.

Example:

<TwitterShareCount url={shareUrl} />

If you want to render anything else but the count, you can provide a function as a child element that takes in shareCount as an argument and returns an element:

<TwitterShareCount url={shareUrl}>
  {shareCount => (
    <span className="myShareCountWrapper">{shareCount}</span>
  )}
</TwitterShareCount>

Icons

const FacebookIcon = generateShareIcon('facebook');
const TwitterIcon = generateShareIcon('twitter');
const GooglePlusIcon = generateShareIcon('google');
const LinkedinIcon = generateShareIcon('linkedin');

Props:

• size: Icon size in pixels (number)
• round: Whether to show round or rect icons (bool)

Example:

<TwitterIcon size={32} round={true} />

License

MIT

Icons

Icon paths provided by: react-social-icons.