Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-share-on-social
Advanced tools
Native sharing using the Web Share API if supported, a beautiful fallback if not.
Weekly downloads
Readme
: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.
npm install react-share-on-social
or, if you're using yarn:
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.
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>
);
};
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. |
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. |
The supported props are passed in the sharing URL to each service, and will appear in the post draft.
Social media | Supported props |
---|---|
link | |
link , textToShare | |
link | |
link , textToShare | |
link , linkTitle , textToShare | |
link | |
Telegram | link , textToShare |
link , textToShare |
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.
FAQs
Native sharing using the Web Share API if supported, a beautiful fallback if not.
The npm package react-share-on-social receives a total of 333 weekly downloads. As such, react-share-on-social popularity was classified as not popular.
We found that react-share-on-social demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.