search

sakerhetspolisen / react-share-on-social

Native sharing using the Web Share API if supported, a beautiful fallback if not. :sunglasses:
https://yhn9h.csb.app/
MIT License
16 stars 5 forks source link
component copy-to-clipboard fallback polyfill react share social-share social-share-plugin web-share

readme

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.

npm bundle size Maintenance npm NPM

Demo

Enhanced with ❤︎ by Karl Sellergren, originally built by Harsh Zalavadiya.

react-share-on-social fallback preview

Features

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?

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.

License

MIT