sakerhetspolisen / react-share-on-social

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

react-share-on-social

🥰😜🤑😎🥳

Native sharing if supported, beautiful fallback if not.

A ~8kb package for effortless social media sharing, originally forked from react-web-share.

Demo

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

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.

License

MIT

react-share-on-social's Issues

Combining efforts

Great work and beautiful aesthetic improvements, @sakerhetspolisen !

I am just wondering if you have considered creating a PR and merging your work with @harshzalavadiya's.

On one hand your project looks has a much better look, but his is better maintained. Can't we combine the efforts here? Everybody could benefit a lot! 😊

@harshzalavadiya what are your thoughts on a possible merge?

Add a package.json `description` entry

Add more styling props

Right now, the package only has backdropColor as a styling prop. For the fallback, we should add props for the following:

• The popup background

• The background of the 'Copy to clipboard'-button

• The background of the 'Close'-button

• The text color

• The text color of the buttons

Change textToShare default value

The default value for the textToShare prop is "test" right now. This should be changed to an empty value.

Fix favicon fallback

Not passing the favicon prop results in the Alt showing, which right now uses the old prop name (which is undefined):

First of all the Alt should include the correct prop:

alt={`Favicon for ${shareData.linkTitle}`}

Then, the favicon should be a globe or a square with a grey background as a fallback.

--frozen-lockfile on Node workflow exits with error code

warning Lockfile has incorrect entry for "react-dom@^16.8.3". Ignoring it.
error Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.

Add a https-only warning in docs

The Web Share API only works in secure contexts (link).

Fix big social media buttons when shareTo.length is less than 4

When choosing social media channels, choosing less than 4 results in the fallback rendering bigger buttons than usual:

This can be fixed by changing this line:

gridTemplateColumns: "repeat(auto-fit, minmax(60px,1fr))",

to

gridTemplateColumns: "repeat(4, minmax(60px,1fr))",

shareTo elements should start with lower-case chars in documentation

When closing the fallback, the animation flickers

Right now the package has two state variables called backdropFadeClass and popupFadeClass which are updated when the animations should run. In addition, in Backdrop.tsx has a <style> element which holds all the CSS keyframe animations. This needs to be improved, but how?

window is not defined on SSR with NextJS

The component works fine but with an error when using with NextJS 13. It is because it tries to access window on SSR part. The error happens only when reloading the page and error is logged on the server side (not on browser console).

 ⨯ node_modules/react-share-on-social/dist/react-share-on-social.cjs.development.js (480:0) @ eval
 ⨯ ReferenceError: window is not defined
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/modal/social-bar.tsx:11:79)
    at (ssr)/./src/components/modal/social-bar.tsx (.next/server/app/(blog)/[blog]/page.js:401:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/post/post.tsx:18:76)
    at (ssr)/./src/components/post/post.tsx (.next/server/app/(blog)/[blog]/page.js:478:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (./src/components/blog/blog-timeline.tsx:7:79)
    at (ssr)/./src/components/blog/blog-timeline.tsx (.next/server/app/(blog)/[blog]/page.js:214:1)
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)