How to activate web share using react-web-share in ReactJS ?

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:

• React JS
• NPM and Node.js

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.

// Filename - App.js

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",
                    url: "http://localhost:3000",
                    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.