React-Quick-Share

A simple but robust social media share module that facilitates sharing content on some of the world's most popular social networks.

Features

• Ease of Use: Simple API for integrating social sharing buttons.
• Customizable: Extensible styles and properties.
• Support for Multiple Platforms: Includes support for multiple platforms.
• Mobile Support: Detects mobile devices to optimize sharing links.
• Advanced URL Parameters: Support for platform-specific URL parameters like title, description, etc.
• React 19 Support: Compatible with both React 18 and React 19.
• 100% Test Coverage: Comprehensive test coverage for all code paths.

This module includes components for sharing via:

• Facebook
• WhatsApp
• Twitter
• LinkedIn
• Pinterest
• Telegram
• Reddit
• Tumblr
• Hacker News
• Buffer
• Medium
• Pocket
• Email
• Print

The plan is to expand these components to accommodate other social media platforms. In the meantime, you can also extend the components yourself through a simple API.

Install

1npm install react-quick-share

or if you prefer yarn,

1yarn add  react-quick-share

Usage

Simply import the component you want and wrap your child node with it. This gives you the power to decide exactly how your share component should look. The child node could be a simple text - as in the examples used here, an icon component, or a custom component. You only need to pass in the url you want to share.

If you do not pass the url prop, the component will share the url of the page where you render it.

1import { Facebook, Twitter, Whatsapp } from 'react-quick-share';
2
3export const SocialMediaShare = () => {
4    const url = 'www.the-url-you-want-to-share.com';
5
6    return (
7        <>
8            <Facebook url={url}>
9                <span className="up-to-you">Facebook</span>
10            </Facebook>
11            <Twitter url={url}>
12                <span className="up-to-you">Twitter</span>
13            </Twitter>
14            <Whatsapp url={url}>
15                <span className="up-to-you">Whatsapp</span>
16            </Whatsapp>
17        </>
18    );
19};

Advanced Usage with URL Parameters

Some platforms support additional parameters like title, description, etc. You can pass these parameters using the urlParams prop:

1import { Reddit, Tumblr } from 'react-quick-share';
2
3export const AdvancedSocialMediaShare = () => {
4    const url = 'www.the-url-you-want-to-share.com';
5    const title = 'Check out this awesome article!';
6    const description = 'This is a detailed description of the article content.';
7
8    return (
9        <>
10            <Reddit url={url} urlParams={{ title: title }}>
11                Share on Reddit with Title
12            </Reddit>
13
14            <Tumblr
15                url={url}
16                urlParams={{
17                    title: title,
18                    text: description,
19                }}
20            >
21                Share on Tumblr with Title and Description
22            </Tumblr>
23        </>
24    );
25};

Extending Usage

If you need to share to a social media domain not already supported out-of-the-box, you will need the extendShare object and the createSocialShareButton function. The extendShare object accepts a key of the name of the new domain, and an object value that contains shareType set to link, and url set to the new domain's share endpoint.

The createSocialShareButton component takes the newDomain string as argument.

Basic Extension

1import { extendShare, createSocialShareButton } from 'react-quick-share';
2
3extendShare.newDomain = {
4    shareType: 'link',
5    url: 'https://www.newDomain.com/sharing/?url=',
6};
7
8const MyCustomShareButton = createSocialShareButton('newDomain');
9
10export const SocialMediaShare = () => {
11    const url = 'www.the-url-you-want-to-share.com';
12
13    return <MyCustomShareButton url={url}>Share on My Domain</MyCustomShareButton>;
14};

Advanced Extension with Parameter Mapping

For platforms that support additional parameters, you can define a paramMap that maps your parameter names to the platform's expected parameter names:

1import { extendShare, createSocialShareButton } from 'react-quick-share';
2
3extendShare.customPlatform = {
4    shareType: 'link',
5    url: 'https://www.example.com/share',
6    paramMap: {
7        url: 'u', // maps 'url' to the platform's 'u' parameter
8        title: 'title', // maps 'title' to the platform's 'title' parameter
9        description: 'desc', // maps 'description' to the platform's 'desc' parameter
10    },
11};
12
13const CustomPlatformButton = createSocialShareButton('customPlatform');
14
15export const AdvancedSocialMediaShare = () => {
16    const url = 'www.the-url-you-want-to-share.com';
17
18    return (
19        <CustomPlatformButton
20            url={url}
21            urlParams={{
22                title: 'My Custom Title',
23                description: 'My Custom Description',
24            }}
25        >
26            Share on Custom Platform
27        </CustomPlatformButton>
28    );
29};

This will generate a URL like: https://www.example.com/share?u=www.the-url-you-want-to-share.com&title=My%20Custom%20Title&desc=My%20Custom%20Description

Props

Each share button component accepts the following props along with regular ButtonHTMLAttributes:

Prop	Type	Description	Default
url	string	The URL to be shared.	window.location.href
domain	string	The social media platform.	None
subject	string	Subject for the sharing link (email only).	""
urlParams	object	Additional parameters for the sharing URL.	{}
style	object	Custom styles to apply to the button.	{}
children	node	Custom label or element to render as button.	None

Custom Styles

In some rare cases you may want to style these base components to achieve certain stylistic goals. In that case you will need to create and pass in your styles object as a style prop.

However, it is best to simply wrap the react-quick-share components with your own appropriately styled components. You can also pass your custom components as children to the react-quick-share components.

1import { Facebook, Twitter } from 'react-quick-share';
2
3const style = {
4    borderRadius: '4px',
5    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
6};
7
8export const SocialMediaShare = () => {
9    const url = 'www.the-url-you-want-to-share.com';
10
11    return (
12        <>
13            {/* wrap the share components with your own component */}
14            <span className="up-to-you">
15                <Twitter url={url} style={style}>
16                    Twitter
17                </Twitter>
18            </span>
19
20            {/* pass your own components as children */}
21            <Facebook url={url} style={style}>
22                <span className="up-to-you">Facebook</span>
23            </Facebook>
24        </>
25    );
26};

Contributing

You are welcome to contribute or suggest improvements via issues or pull requests.

Quality Assurance

React Quick Share maintains 100% test coverage across all metrics:

• 100% statement coverage
• 100% branch coverage
• 100% function coverage
• 100% line coverage

This ensures the library functions correctly across different environments and edge cases.

License

MIT