La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous examinons Joyride et comment l’intégrer dans une application React.
L’expérience utilisateur est essentielle lorsqu’il s’agit de l’efficacité des applications Web. Vous voulez vous assurer que les utilisateurs de votre application comprennent quoi faire et comment naviguer dans les différentes sections de l’application. La création d’une visite guidée interactive de votre application peut résoudre ce problème. C’est une manière explicite de présenter l’application aux utilisateurs et de les familiariser avec ses fonctionnalités.
Bien que la plupart des bibliothèques résument le fonctionnement interne et facilitent les étapes de création de visites guidées interactives dans les applications Web, la Bibliothèque React Joyride se démarque. Il est plus flexible et permet un certain niveau de personnalisation.
Dans cet article, nous examinerons brièvement la bibliothèque React Joyride, son fonctionnement et ses différences avec les bibliothèques similaires. De plus, nous allons créer une démo d’une page de destination et y intégrer la bibliothèque React Joyride, avec quelques personnalisations. Commençons!
Configuration du projet
Exécutez la commande suivante dans votre terminal pour configurer une application React :
npx create-react-app react-joyride-demo
Ensuite, exécutez les commandes ci-dessous pour naviguer dans le dossier du projet créé et installer la bibliothèque React Joyride.
cd react-joyride-demo
npm install react-joyride
Exécutez la commande ci-dessous pour démarrer votre serveur de développement :
npm start
Un aperçu de la bibliothèque React Joyride
Le package React Joyride est très apprécié pour le développement de visites interactives d’applications Web, avec plus de 5 000 étoiles sur GitHub et un système de maintenance actif. Avec React Joyride, les utilisateurs d’une application peuvent voir ses fonctionnalités via une visite interactive, qui les invite à explorer des points d’intérêt spécifiques et met en évidence les fonctionnalités de base.
La bibliothèque React Joyride cible les éléments DOM dans une application sur laquelle elle affiche une info-bulle avec la description définie par le développeur des éléments individuels. Chaque info-bulle d’un élément pointe vers et décrit l’élément tel qu’il est défini. Sous le capot, la bibliothèque React Joyride utilise flotteur de réaction pour positionner et styliser correctement l’info-bulle.
Comparée à des bibliothèques similaires, la bibliothèque React Joyride est moins rigide et offre plus de flexibilité et de personnalisation. Il permet de redéfinir le thème de la bibliothèque pour répondre aux besoins de l’application. Il rend chaque action et événement visible pour l’utilisateur, ce qui vous permet de l’adapter à vos besoins. Il comprend également des solutions pour la majorité des cas d’utilisation des visites de produits.
Pour créer des visites interactives avec la bibliothèque React Joyride, il vous suffit d’importer son composant dans votre application et de transmettre les accessoires requis. Dans une section ultérieure, nous examinerons de près comment nous pouvons le faire. Cependant, dans la section suivante, créons une simple page d’accueil avec laquelle nous pouvons travailler.
Construire une application frontale simple
Avec React installé et notre application démarrée, construisons une version de démonstration de la page de destination d’une compagnie d’assurance. Après quoi, nous intégrerons la bibliothèque React Joyride.
Pour le style, ouvrez le src/App.css
fichier et remplacez les styles prédéfinis par ceux-ci :
.App {
color: #333;
}
.container {
width: 1400px;
max-width: 95%;
margin: 0 auto;
}
.hero {
width: 100%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header > h3 {
font-size: 1.5rem;
color: #5caeab;
}
.header__nav {
display: flex;
list-style: none;
}
.header__nav > li {
margin: 0 0.5rem;
}
.header__nav > li > a {
text-decoration: none;
font-weight: 600;
color: inherit;
}
.header__nav > .login > a {
color: #5caeab;
font-weight: 700;
}
.hero__body {
height: 85vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.hero__body > h1 {
font-size: 2.5rem;
margin: 0;
text-align: center;
}
.hero__body > p {
font-size: 1rem;
width: 500px;
text-align: center;
}
.hero__body > .signup {
padding: 0.7rem 1.5rem;
background: #5caeab;
font-weight: 700;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
.packages {
background: linear-gradient(to bottom right, #fff, #5caeab);
padding: 1rem 0 3rem 0;
}
.packages > .container > h3 {
text-align: center;
margin: 1rem 0;
}
.packages > .container > p {
text-align: center;
font-style: italic;
color: #5caeab;
font-weight: 600;
}
.cards {
display: flex;
margin: 2.5rem 0;
gap: 1rem;
}
.cards > div {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 1.5rem 0.5rem;
}
.cards > div > h4 {
text-align: center;
color: #044947;
}
.cards > div > p {
text-align: center;
}
.explore {
text-align: center;
display: block;
text-decoration: none;
color: #044947;
font-weight: 700;
}
.footer > .container {
padding: 2rem 0 1rem 0;
}
.footer > .container > h3 {
text-align: center;
margin: 1rem 0;
}
.form {
display: flex;
justify-content: center;
margin: 5rem 0;
}
.form > input {
border: 1px solid #5caeab;
padding: 0.5rem;
border-radius: 2px;
margin-right: 0.3rem;
width: 20rem;
}
.form > input:focus {
outline: none;
}
.form > button {
background: #5caeab;
border: none;
border-radius: 2px;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.footer > .container > p {
text-align: center;
}
.footer > .container > p > span {
color: #5caeab;
font-weight: 600;
}
Nous voulons un Hero
composant de section pour la page qui inclut un composant d’en-tête. Nous aurons également un Packages
composant qui répertorie les offres et un Footer
composant.
Dans le src
dossier, créez un nouveau dossier nommé components
et ajouter un Header.js
déposer dessus. Ouvrez le src/components/Header.js
fichier et ajoutez-y ce qui suit :
import React from "react";
export default function Header() {
return (
<header className="container header">
<h3>INSURE</h3>
<ul className="header__nav">
<li>
<a href="https://www.telerik.com/">About</a>
</li>
<li>
<a href="/Reviews">Our Culture</a>
</li>
<li>
<a href="/Our culture">Blog</a>
</li>
<li className="login">
<a href="https://www.telerik.com/">Log in</a>
</li>
</ul>
</header>
);
}
Ici, nous avons défini la Header
composant. Ensuite, créons un Hero.js
dossier dans le src/components/
dossier et ajoutez-y le code ci-dessous :
import React from "react";
import Header from "./Header";
export default function Hero() {
return (
<section className="hero">
<Header />
<div className="container hero__body">
<h1>Get Insurance Policy and Save 30%!</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model words.
</p>
<a href="https://www.telerik.com/" className="signup">
Get Started
</a>
</div>
</section>
);
}
Ici, nous avons défini la Hero
composant et rendu le Header
composant avec du texte factice.
Créons également un Packages.js
dossier dans le src/components
dossier et ajoutez-y ce qui suit :
import React from "react";
export default function Packages() {
return (
<section className="packages">
<div className="container">
<h3>PACKAGES</h3>
<p>An overview of exciting insurance packages we offer</p>
<div className="cards">
<div>
<h4>Health</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.
</p>
</div>
<div>
<h4>Travel</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.
</p>
</div>
<div>
<h4>Life</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting
industry and uses Latin words combined with a handful of model
words.
</p>
</div>
</div>
<a href="https://www.telerik.com/" className="explore">
Click here to explore {">>>"}
</a>
</div>
</section>
);
}
Dans le code ci-dessus, nous avons défini un Packages
composant qui renvoie des exemples de packages. Pour ajouter le Footer
composant, créez un Footer.js
dossier dans le
src/components
dossier et ajoutez-y ce qui suit :
import React from "react";
export default function Footer() {
return (
<footer className="footer">
<div className="container">
<h3>SUBSCRIBE TO OUR NEWSLETTER</h3>
<form className="form">
<input type="email" placeholder="Email address" />
<button>Subscribe</button>
</form>
<p>
Powered by <span>INSURE</span>. Copyright © 2022
</p>
</div>
</footer>
);
}
Ici, nous avons défini la Footer
composant qui affiche un formulaire de newsletter simple.
Maintenant, pour rassembler tous ces composants, ouvrez le src/App.js
fichier et remplacez le code prédéfini qu’il contient par ce qui suit :
import Hero from "./components/Hero";
import Packages from "./components/Packages";
import Footer from "./components/Footer";
import "./App.css";
function App() {
return (
<div className="App">
<Hero />
<Packages />
<Footer />
</div>
);
}
export default App;
Ici, nous avons importé et rendu le Hero
, Packages
et Footer
Composants. Nous avons également importé les styles que nous avons précédemment définis dans le App.css
déposer.
Enregistrez les modifications et prévisualisez l’application dans votre navigateur pour voir ce que nous avons.
Intégration de la bibliothèque React Joyride
La librairie React Joyride exporte un core Joyride
composant que nous pouvons utiliser pour créer des visites dans les applications React. Le Joyride
le composant attend un requis steps
prop lors du rendu. Le steps
prop est un tableau d’objets utilisé pour définir les différentes étapes ou phases de la visite. Le target
et content
sont deux propriétés essentielles que chaque objet du tableau doit contenir.
Le target
La propriété accepte une valeur qui pointe vers l’élément approprié que nous voulons mettre en évidence pour une étape particulière de la visite. Il peut s’agir d’un sélecteur CSS ou d’un HTMLElement.
Le content
propriété, d’autre part, définit le corps de l’info-bulle. Il accepte les valeurs qui spécifient le contenu affiché pour l’étape.
Il est important de noter que l’ordre dans lequel nous définissons les objets dans le steps
array est l’ordre dans lequel la visite se déroulera.
Pour voir cela en action, remplacez le contenu de votre src/App.js
fichier comme ceci:
import Hero from "./components/Hero";
import Packages from "./components/Packages";
import Footer from "./components/Footer";
import "./App.css";
import Joyride from "react-joyride";
const steps = [
{
target: ".header > h3",
content: "Welcome!! Please spare a minute to learn about our page",
},
{
target: ".login",
content: "You can log in here",
},
{
target: ".signup",
content: "Sign up here, if you're new",
},
{
target: ".packages h3",
content: "The packages we offer",
},
{
target: ".explore",
content: "Click here to find out more about other packages",
},
{
target: ".footer .form",
content: "Subscribe to our newsletter here",
},
];
function App() {
return (
<>
<Joyride steps={steps} />
<div className="App">
<Hero />
<Packages />
<Footer />
</div>
</>
);
}
export default App;
Dans le code ci-dessus, nous avons importé et rendu le Joyride
composant. Ensuite, nous avons défini une steps
tableau et l’a passé comme accessoire au Joyride
composant. Notre visite devrait comporter six étapes puisque nous avons défini six objets dans le steps
déployer. Vous pouvez toujours modifier ou modifier cela selon vos préférences.
Enregistrez les modifications et testez l’application dans votre navigateur. Vous devriez voir une balise animée (un petit cercle de couleur rouge) sur le premier élément ciblé dans le steps
déployer. Cliquez sur la balise pour démarrer la visite.
Personnaliser la visite
Comme mentionné précédemment, l’un des avantages de l’utilisation de la bibliothèque React Joyride est qu’elle est moins rigide et permet une plus grande personnalisation. En plus de steps
prop, d’autres accessoires facilitent ces personnalisations.
Dans les sections suivantes, nous examinerons certains des autres accessoires. Cependant, avant de continuer, résolvons rapidement un problème de comportement avec notre visite. Vous devriez avoir remarqué que vous devez fermer chaque étape de la visite avant de passer à la suivante. Le Joyride
composant accepte également un continuous
prop qui peut être utilisé pour résoudre ce problème. Il prend une valeur booléenne qui maintient la visite en mouvement lorsqu’il est défini sur true
.
Ouvrez votre src/App.js
fichier et mettre à jour le Joyride
composant comme indiqué ci-dessous :
<Joyride steps={steps} continuous={true} />
Cela fait, vous devriez voir un bouton suivant qui peut être utilisé pour continuer la visite sans avoir à le fermer à intervalles réguliers.
Ajout de styles personnalisés
L’état actuel de notre tournée montre que le thème général par défaut du Joyride
composant ne correspond pas au thème de notre application. Le composant accepte également styles
props pour remplacer certains styles par défaut. Pour ajuster le thème général, cependant, nous devons imbriquer un options
objet au sein de styles
objet. Voici la valeur par défaut options
objet, comme on le voit dans documents officiels.
const options = {
arrowColor: "#fff",
backgroundColor: "#fff",
beaconSize: 36,
overlayColor: "rgba(0, 0, 0, 0.5)",
primaryColor: "#f04",
spotlightShadow: "0 0 15px rgba(0, 0, 0, 0.5)",
textColor: "#333",
width: undefined,
zIndex: 100,
};
Le thème général prend ces valeurs, donc pour remplacer l’un des styles, nous devons le définir dans notre options
objet imbriqué dans styles
objet et passé comme accessoire au Joyride
composant.
En plus de changer les styles du thème général, nous pouvons également remplacer les styles de certains des composants fournis avec le Joyride
composant. Par exemple, nous pouvons remplacer les styles des spotlight
le tooltip
composant, le beacon
composant, etc. Il suffit de définir l’objet styles pour chaque composant et de les ajouter au styles
objet. Cliquez sur
ici pour voir tous les composants remplaçables définis par la bibliothèque React Joyride.
Ouvrez le src/App.js
fichier et mettre à jour le Joyride
composant comme ceci pour remplacer certains des styles par défaut :
<Joyride
steps={steps}
continuous={true}
styles={{
options: {
arrowColor: "#5caeab",
backgroundColor: "#5caeab",
overlayColor: "rgba(92, 174, 171, .3)",
primaryColor: "#5caeab",
textColor: "#fff",
},
spotlight: {
backgroundColor: "transparent",
},
}}
/>
Ici, nous avons changé certains styles pour le thème général et le spotlight
composant à aligner avec les styles de la page.
Enregistrez les modifications et testez l’application pour voir les modifications.
Afficher la progression de la visite
Pour montrer le déroulement de la tournée, le Joyride
composant accepte également un showProgress
soutenir. Lorsqu’il est réglé sur true
l’accessoire affiche la distance parcourue par l’utilisateur avec la visite.
Ouvrez votre src/App.js
fichier et mettre à jour le Joyride
composant comme indiqué ci-dessous :
<Joyride
steps={steps}
continuous={true}
styles={{
options: {
arrowColor: "#5caeab",
backgroundColor: "#5caeab",
overlayColor: "rgba(92, 174, 171, .3)",
primaryColor: "#5caeab",
textColor: "#fff",
},
spotlight: {
backgroundColor: "transparent",
},
}}
showProgress={true}
/>
Nous avons ajouté un nouveau showProgress
prop pour afficher la progression de la visite à chaque étape.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Activer le saut à chaque étape
Un utilisateur particulier peut déjà être familiarisé avec l’application et souhaiter immédiatement quitter la visite. Le Joyride
composant accepte également un showSkipButton
prop qui, lorsqu’il est réglé sur true
ajoute un bouton de saut qui peut être utilisé pour quitter la visite immédiatement.
Notez que le bouton d’annulation en haut à droite de chaque info-bulle ne fait que quitter une étape particulière et passer à l’étape suivante. Le bouton de saut termine entièrement la visite.
Ouvrez votre src/App.js
fichier et mettre à jour le Joyride
composant comme ceci:
<Joyride
steps={steps}
continuous={true}
styles={{
options: {
arrowColor: "#5caeab",
backgroundColor: "#5caeab",
overlayColor: "rgba(92, 174, 171, .3)",
primaryColor: "#5caeab",
textColor: "#fff",
},
spotlight: {
backgroundColor: "transparent",
},
}}
showProgress={true}
showSkipButton={true}
/>
Ici, nous avons ajouté le showSkipButton
prop pour ajouter un bouton de saut à chaque étape.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Démarrer automatiquement la visite au chargement de la page
Jusqu’à présent, nous avons toujours dû cliquer sur la balise pour démarrer la visite. Nous pouvons également définir la visite pour qu’elle démarre automatiquement après le chargement de la page. Pour cela, il suffit d’ajouter un disableBeacon
propriété à la première étape de la tournée définie dans le tableau steps. Lorsqu’il est défini sur vrai, le disableBeacon
La propriété démarre automatiquement la visite au chargement de la page.
Ouvrez votre src/App.js
fichier et mettre à jour le steps
tableau comme indiqué ci-dessous :
const steps = [
{
target: ".header > h3",
content: "Welcome!! Please spare a minute to learn about our page",
disableBeacon: true,
},
{
target: ".login",
content: "You can log in here",
},
{
target: ".signup",
content: "Sign up here, if you're new",
},
{
target: ".packages h3",
content: "The packages we offer",
},
{
target: ".explore",
content: "Click here to find out more about other packages",
},
{
target: ".footer .form",
content: "Subscribe to our newsletter here",
},
];
Ici, nous avons ajouté le disableBeacon
propriété au premier step
objet et définissez sa valeur sur true
.
Enregistrez le fichier pour voir les modifications dans votre navigateur.
Conclusion
La création de visites guidées interactives d’applications Web est un outil essentiel pour améliorer l’expérience utilisateur d’une application. Cela peut être facilement géré à l’aide de la bibliothèque React Joyride. Dans cet article, nous avons examiné la bibliothèque React Joyride et comment l’intégrer dans une application React. Cependant, vous pouvez aller plus loin en plongeant dans le documents officiels pour en savoir plus sur d’autres choses intéressantes que vous pouvez faire avec la bibliothèque.
Source link