How to activate web share using react-web-share in ReactJS ?
Last Updated :
10 Nov, 2023
Activating Web share using react-web-share in ReactJS enables the sharing of specific data from one webpage/ browser. Using the social share button user can share their content on different social media sites.
Prerequisites:
Approach:
To add our Social Share buttons we are going to use the react-web-share package. The react-web-share package contains UI components that help us add social share buttons. So first, we will install the react-web-share package and then we will add different social share buttons on our homepage using the react-web-share package.
Steps to Create React JS Application:
Step 1: Initialize a new ReactJs project using the below command:
npx create-react-app gfg
Step 2: Move to the project directory.
cd gfg
Step 3: Now we will install the react-web-share package using the below command.
npm i react-web-share
Project Structure:
The Updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-web-share": "^2.0.2",
"web-vitals": "^2.1.4"
}
Example: This example implements web share functionality to share sample data using the react-web-share library.
Javascript
import React from "react";
import { RWebShare } from "react-web-share";
export default function WebShareGfg() {
return (
<div>
<h1>Web Share - GeeksforGeeks</h1>
<RWebShare
data={{
text: "Web Share - GfG",
title: "GfG",
}}
onClick={() =>
console.log("shared successfully!")
}
>
<button>Share on Web</button>
</RWebShare>
</div>
);
}
|
Steps to run the application:- Run the below command in the terminal to run the app.
npm start
Output: This output will be visible on http://localhost:3000/ on the browser window.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...