How to activate web share using react-web-share in ReactJS ?
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.
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:
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.