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.

New! Pinterest support added in 1.2.0.

Features:

• opens a popup share-window
• supported services: Facebook, Twitter, Google+, LinkedIn, Pinterest
• share buttons with generated icons or custom icons of your choice
• share counts

Demos:

• demos/demo0: Facebook, Twitter, Google+, Linkedin
• demos/demo1: Pinterest

To run demos: clone repo and run npm install && npm run run-demos and open http://localhost:8080.

Install

npm install react-share --save

Browser

ShareButtons work on all browsers.

ShareCounts works on all browsers, with the exception of Goolge Plus share count working only on IE11 and newer (XHR CORS problem).

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,
  PinterestShareButton
} = 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)

Required prop for PinterestShareButton:

• media: An absolute link to the image that will be pinned (string)

Share counts

const {
  FacebookShareCount,
  GooglePlusShareCount,
  LinkedinShareCount,
  TwitterShareCount,
  PinterestShareCount
} = 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');
const PinterestIcon = generateShareIcon('pinterest');

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.