Socket
Socket
Sign inDemoInstall

react-share-on-social

Package Overview
Dependencies
5
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-share-on-social

Native sharing using the Web Share API if supported, a beautiful fallback if not.


Version published
Maintainers
1
Weekly downloads
438
decreased by-14.12%

Weekly downloads

Readme

Source

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

PropertyTypeDescription
textToSharestringThe text that appears in the post.
linkURLThe URL to share.
linkTitlestringThe link title which should correspond to the <title> tag.
linkMetaDescstringThe meta description of the link, should correspond to the <meta og:description> tag.
linkFaviconHTMLImageElementA small image which is shown in the header of th popup fallback.

Optional props

PropertyTypeDefaultDescription
shareToArray<string>["facebook", "twitter", ... , "email"]A list of all social media channels that should appear in the fallback.
noRefererbooleanfalseIf the social media buttons should have a noreferrer tag or not.
backdropColorstringrgba(0,0,0,0.4)The background color of the backdrop.
closeTextstringCloseThe label of the close button.
copyToClipboardTextstringCopy to clipboardThe label of the copy to clipboard button.
copySuccessTextstringCopiedThe label of the copy to clipboard button after a successful copy.
onSocialClick() => void() => nullA 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 mediaSupported props
Facebooklink
Twitterlink, textToShare
Whatsapplink
Redditlink, textToShare
LinkedInlink, linkTitle, textToShare
Pinterestlink
Telegramlink, textToShare
Emaillink, 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

Keywords

FAQs

Last updated on 28 Apr 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc