Implémentation du partage dynamique sur les réseaux sociaux dans votre application React avec React Share

DEV - 29/07
Dans cet article, nous explorons la bibliothèque React Share. Vous apprendrez à intégrer les réseaux sociaux...
Dans cet article, nous explorons la bibliothèque React Share. Vous apprendrez à intégrer des boutons de partage de réseaux sociaux à l'aide de React Router DOM, améliorant ainsi vos projets React avec du contenu dynamique et partageable !

Aperçu du concept de l'article

Le problème:

Les projets React sont des applications d'une seule page avec une seule URL, ce qui pose un défi pour les bibliothèques comme React-Share, qui nécessitent des URL uniques pour chaque page que vous souhaitez partager.

La solution:

Utilisez React Router DOM pour créer des chemins d'URL distincts au sein de votre projet React d'une seule page, permettant ainsi à la bibliothèque React Share de fonctionner correctement.

Concepts de partage de réaction couverts

Dans cet article, nous aborderons les concepts React Share suivants :

  • Installation : Comment installer la bibliothèque React Share dans votre projet à l'aide de npm.

  • TwitterShareButton et TwitterIcon : composants utilisés pour créer un bouton de partage Twitter avec une taille et un style d'icône personnalisables.

  • LinkedinShareButton et LinkedinIcon : composants utilisés pour créer un bouton de partage LinkedIn avec une taille et un style d'icône personnalisables.

  • Accessoires : comment utiliser des accessoires tels que l'URL, le titre, la taille et la forme pour personnaliser les boutons de partage.

  • Intégration avec React Router : Comment utiliser le DOM de React Router pour créer des URL uniques pour chaque page, permettant à la bibliothèque React Share de fonctionner correctement.

Introduction à la bibliothèque de partage React

La bibliothèque React Share est un outil simple et flexible permettant d'ajouter des boutons de partage de réseaux sociaux aux applications React. Il prend en charge diverses plateformes telles que Facebook, Twitter et LinkedIn, permettant une personnalisation facile de l'apparence et du comportement des boutons.

Bien qu'elles ressemblent aux icônes liées à vos comptes de réseaux sociaux, les icônes React Share sont utilisées pour partager des pages Web spécifiques de votre application.

La bibliothèque propose plusieurs options de personnalisation, notamment la définition de l'URL à partager, l'ajout de hashtags et la personnalisation des styles des icônes. Une URL unique est essentielle si vous souhaitez partager des pages spécifiques de votre projet React, comme des articles.

Remarque : Pour que React Share fonctionne correctement, vous devez ajouter des URL uniques à votre application monopage. Ceci peut être réalisé en utilisant React Router DOM.

Premiers pas avec React Share

Démarrer avec la bibliothèque React Share est simple et direct. Tout d'abord, installez la bibliothèque, puis utilisez les composants dont vous avez besoin, tels que Twitter/X et LinkedIn. Ajoutez des accessoires tels que l'URL, le titre, la taille et la forme, et tout fonctionne immédiatement !

Pour commencer à utiliser la bibliothèque React Share dans votre projet, suivez ces étapes simples :

Installation

Tout d’abord, vous devez installer la bibliothèque React Share. Ouvrez votre terminal, accédez au répertoire de votre projet et exécutez la commande suivante :

npm installer réagir-partager
Entrer en mode plein écran Quitter le mode plein écran

Cette commande installera la bibliothèque React Share et l'ajoutera aux dépendances de votre projet.

Ajout de boutons de partage Twitter et LinkedIn

Une fois la bibliothèque installée, vous pouvez commencer à ajouter des boutons de partage de réseaux sociaux à vos composants React. Voici un exemple de base de la façon d’ajouter des boutons de partage Twitter et LinkedIn :

  1. Importez les composants nécessaires :
importer React depuis « react » ; importer { TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } depuis 'react-share' ;
Entrer en mode plein écran Quitter le mode plein écran
  1. Créez un composant pour inclure les boutons de partage :
const ShareButtons = () => { const shareUrl = 'https://votresiteweb.com'; const title = 'Découvrez ce site génial !'; retour (
); } ; exporter les ShareButtons par défaut ;
Entrer en mode plein écran Quitter le mode plein écran
  1. Utilisez lePartagerBoutonscomposant dans votre application :
importer React depuis « react » ; importer des ShareButtons depuis './ShareButtons' ; const App = () => {retour (

Bienvenue sur mon site web

); } ; exporter l'application par défaut ;
Entrer en mode plein écran Quitter le mode plein écran

Dans cet exemple, lePartagerBoutonsLe composant comprend à la fois des boutons de partage Twitter et LinkedIn. LepartagerUrlettitreles variables définissent l'URL et le message qui seront partagés.

En suivant ces étapes, vous pouvez facilement intégrer la fonctionnalité de partage sur les réseaux sociaux dans votre application React à l'aide de la bibliothèque React Share.

Intégration de React Router pour une utilisation avec la bibliothèque React Share

Dans mon article précédent, j'ai expliqué comment j'ai intégré React Router DOM dans mon projet Star Wars Ahsoka pour le cas d'utilisation spécifique de l'utilisation de la bibliothèque React-Share. L'utilisation de React Router était une étape nécessaire pour créer des URL uniques pour chacun des articles d'actualité que je souhaitais partager à l'aide de la bibliothèque React Share.

Pour le reste de cet article, j'expliquerai comment j'ai intégré la bibliothèque React Share dans mon ...
[Courte citation de 8% de l'article original]