BlogReact Social Sharing

React Social Sharing

Combining Web Share API and react-share

Topics:

React
Typescript
Vite

Read Time: 5 min

Published: 2023.04.13

Last Updated: 2023.04.13

In this Blog i am going to show you how to build a flexible Social-Sharing component in React.
We are going to leverage the powers of the Web Share API, if the device of the user supports it. If there is no support for native sharing we will fall back to react-share to provide the sharing functionality.

For this project i am going to use the React + Typescript Setup from Vite.

Type in your console:

npm create vite@latest
and follow the menu.

You can also find the final code in my Github Repo.

We will keep the Entry Point of our App, the App.tsx intentionally simple:

TSX

import "./App.css";
import SocialSharing from "./socialSharing/socialSharing";

function App() {
   return (
      <div className="App">
         <h1>React Social Sharing</h1>
         <p>Lets Share this Page:</p>
         <SocialSharing
            url={window.location.origin}
            title="React Social Sharing"
            text="This is a Demo Share for our Example App"
         />
      </div>
   );
}

export default App;

We are passing url, title and text to our SocialSharing-Component as props to our component in order to make it easier reusable.

The SocialSharing component looks like this:

TSX

import NativeShare from "./nativeShare/nativeShare";
import ReactShare from "./reactShare/reactShare";

type Props = {
   url: string;
   title: string;
   text: string;
};

export default function SocialSharing({
   url,
   title,
   text,
}: Props): JSX.Element {
   if ("share" in navigator)
      return <NativeShare url={url} title={title} text={text} />;
   else return <ReactShare url={url} title={title} text={text} />;
}

Here we are checking if the share function is available on the navigator interface of the users device. This indicates, that the device supports the native sharing functionality (usually Smartphones), that we can use.

Keep in mind, that share is only available in secure (https://) contexts. So if you are developing locally, deploy your app in order to test it.

Native Sharing

The NativeShare component, which leverages the native sharing functionality of the users device, is very straight forward:

TSX

type Props = {
   url: string;
   title: string;
   text: string;
};

export default function NativeShare({ url, title, text }: Props): JSX.Element {
   const handleNativeShare = () => {
      navigator
         .share({
            title,
            text,
            url,
         })
         .then(() => {
            console.log("Share Successful");
         })
         .catch(console.error);
   };

   return <button onClick={handleNativeShare}>Native Share</button>;
}

The navigator.share() function returns a promise which resolves if the user successfully shares the url and rejects if an error happens.
You could implement some additional feedback for the user depending on those outcomes.

On a device which supports native share our app should now look like this (Screenshot from my Smartphone):

React Share

First we need to install the react-share dependency with:

npm install react-share

Lets have a look at the component:

TSX

import {
   FacebookShareButton,
   FacebookIcon,
   TwitterShareButton,
   TwitterIcon,
   WhatsappShareButton,
   WhatsappIcon,
} from "react-share";

type Props = {
   url: string;
   title: string;
   text: string;
};

export default function ReactShare({ url, title, text }: Props): JSX.Element {
   return (
      <div
         style={{
            display: "flex",
            justifyContent: "center",
            gap: "10px",
         }}
      >
         <FacebookShareButton url={url} quote={title}>
            <FacebookIcon round />
         </FacebookShareButton>
         <TwitterShareButton url={url} title={text}>
            <TwitterIcon round />
         </TwitterShareButton>
         <WhatsappShareButton url={url} title={text}>
            <WhatsappIcon round />
         </WhatsappShareButton>
      </div>
   );
}

We simply use the Sharing-Buttons for Facebook, Twitter and Whatsapp from react-share.
There are more options than those 3 in the package. Look in react-share if you are interested.

On a device that does not have native sharing functionality our app now should look like this:

Social Sharing on Device without Native Sharing

This non-native method of sharing will open browser-popups of the corresponding social-media platforms.

You can find the final code for this tutorial in my Github-Repo.

Feel free to use my Social-Sharing implementation, created with the same method that is described in this blog ;-)

Feedback Me: