Native sharing using the Web Share API if supported, a beautiful fallback if not.
npm install react-share-on-social:smiling_face_with_three_hearts::stuck_out_tongue_winking_eye::money_mouth_face::sunglasses::partying_face:
Native sharing if supported, beautiful fallback if not.
A ~8kb package for effortless social media sharing, originally forked from react-web-share.

- 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
``bash`
npm install react-share-on-social
or, if you're using yarn:
`bash`
yarn add react-share-on-social
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.
`js
import React from "react";
import ShareOnSocial from "react-share-on-social";
import favicon from "../assets/favicon.png";
const Example = () => {
return (
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
>
);
};
`
| 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
tag. |
| linkMetaDesc | string | The meta description of the link, should correspond to the tag. |
| linkFavicon | HTMLImageElement | A small image which is shown in the header of th popup fallback. |Optional props
| Property | Type | Default | Description |
| --------------------- | --------------- | ---------------------------------------- | --------------------------------------------------------------------------------------- |
|
shareTo | Array | ["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
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.