Features

• Uses the Web Share API for supported browsers
• Copy to clipboard functionality using copy-to-clipboard
• Uses React Portal to render the component outside the parent DOM hierarchy

Installation

npm install react-share-on-social

or, if you're using yarn:

yarn add react-share-on-social

Usage

Passing the linkFavicon prop drastically improves UX for devices that use the fallback. Without linkFavicon, the fallback renders a grey box instead.

Note: The Web Share API only works in secure contexts (HTTPS). Read more here.

import React from "react";
import ShareOnSocial from "react-share-on-social";
import favicon from "../assets/favicon.png";

const Example = () => {
  return (
    <ShareOnSocial
      textToShare="Check out this new wardrobe I just found from IKEA!"
      link="https://ikea.com/wardrobes/kalle"
      linkTitle="KALLE Wardorbe which chooses your clothes for you using AI - IKEA"
      linkMetaDesc="Stop going through the agony of choosing clothes that fit the weather and your mood."
      linkFavicon={favicon}
      noReferer
    >
      <button>Share this product</button>
    </ShareOnSocial>
  );
};

Required props

| Property | Type | Description | | -------------- | ------------------ | --------------------------------------------------------------------------------------- | | textToShare | string | The text that appears in the post. | | link | URL | The URL to share. | | linkTitle | string | The link title which should correspond to the <title> tag. | | linkMetaDesc | string | The meta description of the link, should correspond to the <meta og:description> tag. | | linkFavicon | HTMLImageElement | A small image which is shown in the header of th popup fallback. |

Optional props

| Property | Type | Default | Description | | --------------------- | --------------- | ---------------------------------------- | --------------------------------------------------------------------------------------- | | shareTo | Array<string> | ["facebook", "twitter", ... , "email"] | A list of all social media channels that should appear in the fallback. | | noReferer | boolean | false | If the social media buttons should have a noreferrer tag or not. | | backdropColor | string | rgba(0,0,0,0.4) | The background color of the backdrop. | | closeText | string | Close | The label of the close button. | | copyToClipboardText | string | Copy to clipboard | The label of the copy to clipboard button. | | copySuccessText | string | Copied | The label of the copy to clipboard button after a successful copy. | | onSocialClick | () => void | () => null | A callback invoked when user clicks on any of the social media buttons in the fallback. |

Supported socials

The supported props are passed in the sharing URL to each service, and will appear in the post draft. | Social media | Supported props |
| ----------- | ----------- | | Facebook | link | | Twitter | link, textToShare | | Whatsapp | link | | Reddit | link, textToShare | | LinkedIn | link, linkTitle, textToShare | | Pinterest | link | | Telegram | link, textToShare | | Email | link, textToShare |

What is the difference between react-share-on-social and react-web-share?

• The fallback is more rich with a header and an improved copy-to-clipboard functionality

• Props are restructured for better usability

• Pinterest is supported

• Social media services are opened in a minimal window instead of a new tab

Contribute

So you want to contribute? Good, the world needs more brave troopers like you. Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated by us and the community.

• If you find a typo, bug or want to add a feature, create an issue or add a pull request with the code you want to add!

• Regarding bugs, please make sure that your issue is:

  • Reproducible. Include steps to reproduce the problem.

  • Specific. Include as much detail as possible: which device you use, how you have interacted with the website, etc.

  • Scoped to a Single Bug. One bug per issue.

License

MIT