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.
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.
-