In this article, we are going to learn how we can add Web Share buttons in ReactJS using the react-web-share package. Using the social share button user can share their content on different social media sites.
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.
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 to 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.
Create ReactJS Application: You can create a new ReactJs project using the below command:
npx create-react-app gfg
Install the required package: Now we will install the react-web-share package using the below command:
npm i react-web-share
Project Structure: It will look like this.
Adding Web Share Buttons: After installing the react-web-share package we can easily add different social share buttons on any page in our app. For this example, we are going to add social share buttons to our homepage.
Add the below content in the App.js file:
Javascript
import React from "react";import { RWebShare } from "react-web-share";export default function WebShareGfg() { return ( <div> <h1>Web Share - neveropen</h1> <RWebShare data={{ text: "Web Share - GfG", title: "GfG", }} onClick={() => console.log("shared successfully!")} > <button>Share on Web</button> </RWebShare> </div> );}; |
Explanation: In the above example, we are first importing the RWebShare function from the react-web-share package. After that, we are creating a new WebShareGfg function that will return our social share buttons. You can also pass the URL you want to send in the URL parameter of data.
Steps to run the application:- Run the below command in the terminal to run the app.
npm start
Output:
