En este artículo, vamos a aprender cómo podemos agregar botones Web Share en ReactJs usando el paquete react-web-share. Usando el botón de compartir en redes sociales, el usuario puede compartir su contenido en diferentes sitios de redes sociales.
React es una biblioteca JavaScript front-end gratuita y de código abierto para crear interfaces de usuario o componentes de interfaz de usuario. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.
Enfoque: para agregar nuestros botones Social Share, vamos a utilizar el paquete react-web-share. El paquete react-web-share contiene componentes de interfaz de usuario que nos ayudan a agregar botones para compartir en redes sociales. Primero, instalaremos el paquete react-web-share y luego agregaremos diferentes botones para compartir en redes sociales en nuestra página de inicio usando el paquete react-web-share.
Crear aplicación ReactJS: puede crear un nuevo proyecto ReactJs usando el siguiente comando:
npx create-react-app gfg
Instale el paquete requerido: ahora instalaremos el paquete react-web-share usando el siguiente comando:
npm i react-web-share
Estructura del proyecto: Se verá así.
Agregar botones para compartir en la web: después de instalar el paquete react-web-share, podemos agregar fácilmente diferentes botones para compartir en redes sociales en cualquier página de nuestra aplicación. Para este ejemplo, vamos a agregar botones para compartir en redes sociales a nuestra página de inicio.
Agregue el siguiente contenido en el archivo App.js :
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>
);
};
Explicación: En el ejemplo anterior, primero importamos la función RWebShare del paquete react-web-share. Después de eso, estamos creando una nueva función WebShareGfg que devolverá nuestros botones para compartir en redes sociales. También puede pasar la URL que desea enviar en el parámetro URL de datos.
Pasos para ejecutar la aplicación: – Ejecute el siguiente comando en la terminal para ejecutar la aplicación.
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por imranalam21510 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA