Web-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:
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 ;-)