Lorsqu’il s’agit de gérer plusieurs interactions d’icônes dans une application Next.js, les développeurs peuvent rapidement se retrouver avec un code complexe et répétitif.
Ce manque d’optimisation conduit à un code difficile à maintenir et à étendre, augmentant les risques d’erreurs et ralentissant le développement.
Cet article montre comment simplifier la gestion des interactions d’icônes en utilisant des hooks et des événements de manière efficace, rendant votre code plus propre et facile à gérer.
Modifier la classe des icônes pour les interactions icônes Next.js
Dans le précédent article, nous avons exploré la manière d’afficher des icônes dans notre application. À présent, nous allons approfondir ce concept en envisageant une interaction avec ces icônes. Par exemple, imaginons que vous souhaitiez rendre une icône cliquable et la faire disparaître lorsqu’elle est cliquée. Nous allons ensemble développer cette idée dans la section suivante.
Pour ce faire, commençons d’abord par la déclaration de classe dans la balise de notre icône. Ainsi, rendez-vous dans le fichier app/page.js et examinons les modifications à apporter à l’intérieur de celui-ci.
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
La modification se trouve sur cette ligne :
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
On retrouve encore la déclaration de plusieurs classes pour déclarer la classe curseur, puis nous allons lui appliquer des propriétés CSS pour rendre notre icône cliquable.
Pour finir et atteindre cet objectif, rendez-vous dans le fichier page.module.css pour donner des propriétés à notre classe.
.home{
background-color: white;
width: 75%;
margin: auto;
padding: 15px;
border-radius: 5px;
text-align: center;
}
.home h1{
color: red;
}
.curseur{
cursor:pointer;
}
.curseur:hover{
transform: scale(1.2);
}
Nous avons ciblé notre classe curseur et lui avons attribué une valeur pour rendre l’icône cliquable, comme vous maîtrisez le CSS. Nous avons également appliqué la propriété hover pour augmenter la taille de notre icône Next.js lorsque le curseur la survole.
Parfait, donc la preuve ultime pour vérifier si tout fonctionne correctement est simplement de démarrer le projet.
Déclarer useState pour les interactions icônes Next.js
Dans cette section, nous allons poursuivre l’interaction avec l’icône. Nous avons déjà rendu l’icône cliquable et augmenté sa taille lorsque le curseur la survole. Cependant, nous allons maintenant essayer de supprimer l’icône si l’utilisateur clique dessus. Pour ce faire, nous devons d’abord déclarer un état (useState) pour implémenter cette fonctionnalité. Voyons la modification au niveau du code dans notre composant : app/page.js
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState()
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
La modification se trouve sur cette ligne
const [voir,setVoir] = useState()
Comme vous le savez déjà, voici la manière de déclarer notre useState. Cependant, il est important de vérifier attentivement si useState est correctement importé. Cela se fait avec cette ligne de code
const [voir,setVoir] = useState()
Parfait, mais si vous démarrez le projet maintenant, il va vous generer une erreur comme ceci :
L’erreur nous oblige à utiliser « use client ». Comme je l’ai expliqué précédemment dans le chapitre de présentation de Next.js, l’importation de reactjs dans Next.js ne fonctionne pas de la même manière que d’habitude. Nous devons inclure le mot « use client » dans notre composant afin que l’importation de React.js dans notre projet soit fonctionnelle.
Corrigeons cette erreur maintenant en utilisant use client dans notre composant :
'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState()
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
<p><span className={`${styles.curseur} material-symbols-outlined`}>home
</span></p>
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
Voilà, j’ai ajouté « use client » dans notre composant. Exécutons maintenant pour voir le resultat.
Super, notre composant devient fonctionnel maintenant. Donc notre état est prêt à utiliser maintenant.
Déclarer un événement pour les icônes Next.js
Puisque notre état(useState) était bien déclaré, donc il nous reste de programmer une fonction pour cacher l’icone quand l’utilisateur clique dessus. Faisons-le maintenant dans notre composant app/page.js
'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voir,setVoir] = useState(true)
function Cacher(){
setVoir(false)
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
(voir)?
(<p onClick={Cacher}><span className={`${styles.curseur} material- symbols-outlined`}>home</span></p>)
:""
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
Par défaut, notre icône est affichée, ce qui signifie que le getter voir prend true comme valeur initiale. La fonction Cacher est responsable de modifier la valeur du getter via le setter setVoir. Enfin, une condition ternaire est utilisée pour détecter si l’icône est cliquée. Si c’est le cas, la valeur du getter devient false, indiquant ainsi que l’icône doit être cachée.
Voyons le résultat maintenant pour tester si tout fonctionne bien ou pas.
Bien sûr ! L’icône est maintenant supprimée lorsqu’on clique dessus. Super, tout va bien maintenant alors.
Devenez expert en développement web dynamique avec NextJS et créez des applications performantes.
Gérer plusieurs événements
'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [voirhome,setVoirhome] = useState(true)
const [voirblock,setVoirblock] = useState(true)
function Cacher(icone){
if(icone == 'home'){
setVoirhome(false)
}else if(icone == 'block'){
setVoirblock(false)
}
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
(voirhome)?
(<p onClick={()=>{Cacher('home')}}><span className={`${styles.curseur} material-symbols-outlined`}>home</span></p>
)
:""
}
{
(voirblock)?
(<p onClick={()=>{Cacher('block')}}><span className={`${styles.curseur} material-symbols-outlined`}>block</span></p>
)
:""
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
On a déclaré deux useState pour nos deux icones. Et puis la fonction Cacher est définie avec un paramètre pour modifier l’état des icônes en fonction de celle qui est cliquée. Si l’argument icone est « home », alors voirhome est défini sur false, et si c’est « block », alors voirblock est défini sur false. Finalement, nous avons dupliqué notre structure de condition ternaire pour détecter quelle icône a été cliquée.
Exécutons maintenant notre projet pour vérifier si nous atteignons nos objectifs.
Voilà d’abord ,nos icones sont affichées correctement.
Essayez de les cliquer après
Après les avoir cliquées, toutes les icônes ont disparu. Parfait, nous avons terminé cette partie avec succès alors. Dans le prochain chapitre, nous chercherons à factoriser davantage notre code afin de réduire le nombre de lignes.
Factoriser le code pour les interactions icônes Next.js
L’objectif reste le même que précédemment, mais nous constatons une certaine redondance dans notre code, ce qui n’est pas optimal en programmation informatique. Nous allons donc maintenant essayer de factoriser notre code précédent.
Voyons tout de suite la modification au niveau de notre composant app/page.js
'use client'
import { useState } from "react";
import Nav from "./component/nav";
import styles from "./page.module.css";
export default function Home() {
const [icones,setIcones] = useState([
{name: 'home',visible:true},
{name: 'block',visible:true}
])
function Cacher(index){
let updateIcone = [...icones]
updateIcone[index].visible = false
setIcones(updateIcone)
}
return (
<>
<Nav/>
<div className={`${styles.home} bordure`}>
<h1>Bonjour</h1>
{
icones.map((icone,index)=>(
icone.visible?
(<p onClick={()=>{Cacher(index)} }><span className={`${styles.curseur} material-symbols-outlined`}>{icone.name}</span></p>)
: null
))
}
<p>Lorem ipsum.</p>
<p><a href="https://www.google.fr" target="_blank" data-wpel-link="external" rel="external noopener noreferrer">Aller vers la page de google</a></p>
</div>
</>
);
}
Maintenant, nous avons simplifié la déclaration des useState en initialisant un seul état avec un tableau contenant deux objets. Chaque objet représente une icône avec deux propriétés : name pour le nom de l’icône et visible pour son état de visibilité. La valeur par défaut de la propriété visible est définie à true pour chaque objet, ce qui permet d’afficher les icônes par défaut.
De plus, nous avons optimisé la fonction Cacher de manière cohérente en déclarant une variable pour stocker les icônes. Cela nous permet de cibler et de modifier l’index de l’icône de manière efficace.
Finalement, nous avons utilisé la méthode map pour parcourir toutes les icônes dans notre condition ternaire.
Cela nous donne toujours le même résultat comme ceci après l’exécution du projet.
Après avoir clique l’icone home voilà ce qui reste :
Exactement, avec cette méthode, pour ajouter des icônes, vous pouvez simplement rechercher le nom de l’icône sur le site Google Fonts Icons (https://fonts.google.com/icons) et l’ajouter à notre objet de getter. Par exemple, si vous souhaitez ajouter l’icône « download », vous pouvez le faire en ajoutant un nouvel objet à votre tableau icones avec le nom « download » et en définissant sa propriété visible sur true par défaut.
Donc, dans notre composant app/page.js, voilà la modifications dans notre objet du getter :
const [icones,setIcones] = useState([
{name: 'home',visible:true},
{name: 'block',visible:true},
{name: 'download',visible:true}
])
Une fois que vous avez ajouté l’icône « download » à votre tableau icones, elle sera automatiquement ajoutée à votre application. Vous pourrez alors interagir avec cette icône de la même manière que les deux icônes précédentes en la cachant lorsque vous cliquez dessus. Voyons cela maintenant.
c’est génial ! Nous avons réussi à factoriser notre code de manière efficace, ce qui rend notre application plus flexible et facile à maintenir. Avec ce concept, nous terminons donc ce chapitre
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
En suivant les étapes décrites dans cet article, vous serez désormais capable de gérer efficacement les interactions icônes Next.js. De la modification des classes CSS à la déclaration de useState et la gestion des événements, ces compétences vous permettront d’optimiser vos applications pour une meilleure interactivité. La factorisation de votre code assurera également une meilleure maintenance et évolutivité.
N’oubliez pas d’appliquer ces pratiques pour créer des interfaces utilisateurs plus engageantes et réactives.Et par la suite nous allons traiter le volet de map en Next.js.
