Comment créer un composant accordéon avec React.js —

Dans cet article, nous exploiterons toutes les capacités de React.js pour créer un composant accordéon, un périphérique d’interface utilisateur fréquemment utilisé dans les applications Web et mobiles pour organiser et afficher le contenu de manière conviviale et peu encombrante.

Pour tirer le meilleur parti de cet article, vous aurez besoin des éléments suivants :

La vidéo suivante montre notre composant accordéon fini.

Configuration du projet

Nous utiliserons React.js pour créer notre composant accordéon. Pour utiliser React.js, nous devrons créer un environnement React, et nous le ferons via une invite de commande.

Ouvrez votre application de terminal et accédez au bureau (ou ailleurs si vous préférez). Exécutez ensuite la commande suivante pour créer votre application React :

npx create-react-app accordion-component

Une fois les packages installés, nous verrons quelque chose comme l’image ci-dessous.

Maintenant, si nous vérifions notre dossier de projet, nous trouverons un dossier nommé /accordion-component/ avec tous les packages installés.

Structure des dossiers

Ouvrez le nouveau /accordion-component/ dossier dans un éditeur de code. Ouvrez également l’application React dans le navigateur. Nous pouvons le faire via le terminal intégré dans notre éditeur de code en tapant la commande npm run start pour exécuter l’application sur le navigateur.

Remarque : si vous utilisez Visual Studio, vous pouvez utiliser le raccourci (Ctrl + changement + `) pour ouvrir le terminal. Si votre éditeur de code ne dispose pas de la fonctionnalité d’un terminal intégré, vous pouvez simplement exécuter des commandes dans l’application d’invite de commande.)

Modifions ensuite les fichiers et blocs de code inutiles qui gêneront l’exécution de notre application. Tout d’abord, ouvrez App.js et supprimez tout l’élément d’en-tête qui est enveloppé dans le <div> élément avec un nom de classe de Appnous avons donc maintenant un vide <div> élément. Puis ouvrez App.css et index.css et supprimez le contenu des deux fichiers. (Si vous consultez à nouveau la page Web, vous verrez qu’elle est désormais vide, ce qui est exactement ce que nous souhaitons pour l’instant.)

Ensuite, créons un nouveau dossier appelé /AccordionComponent/ sous le /src/ répertoire de dossiers. À l’intérieur de /AccordionComponent/ dossier, créez un fichier appelé Accordion.js pour les composants et un autre fichier nommé AccordionData.js pour stocker le texte à utiliser pour notre accordéon. Allez ensuite au App.js fichier et importer le Accordion.js déposer. Une fois le fichier importé, nous le rendons dans le <div> élément comme ceci :

import './App.css';
import Accordion from './AccordionComponent/Accordion';

function App() {
 return (
  <div className="App">
   <Accordion />
  </div>
 );
}

export default App;

Une fois cela fait, allez au Accordion.js fichier et créez un composant appelé AccordionItem. À l’intérieur de return mot-clé, nous allons créer un élément de titre avec « Accordéon » comme contenu (<h1>Accordion</h1>), et en dessous un autre composant appelé Accordion. Après cela, nous rendrons notre AccordionItem composant à l’intérieur de celui du principal Accordionen vous assurant que le composant rendu est enveloppé dans un <div> élément avec un nom de classe de container. Nous exportons ensuite le principal Accordion composant. Maintenant, nous avons quelque chose comme ceci :

import React from 'react';


const AccordionItem = () => {
  return(
    <h1>Accordion</h1>
  )
}


const Accordion = () => {
 return (
  <div>
    <AccordionItem />
  </div>
 )
}

export default Accordion;

Si nous visualisons notre page Web, nous verrons notre titre à l’écran.

Nous allons ensuite créer un tableau d’objets contenant le texte des questions et réponses à l’intérieur du AccordionData.js déposer. En stockant nos données accordéon dans un tableau d’objets, nous garantissons que les données sont stockées dynamiquement et que le composant accordéon est réutilisable. Vous trouverez ci-dessous les données de l’accordéon. Vous pouvez le copier et le coller dans votre AccordionData.js déposer directement :

const data = [
  {
   question: 'What are accordion components?',
   answer: 'Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action.' ,
  },
  {
   question: 'What are they used for?',
   answer: 'They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options.',
  },
  {
   question: 'Accordion as a musical instrument',
   answer: 'The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres.',
  },
  {
   question: 'Can I create an accordion component with a different framework?',
   answer: 'Yes of course, it is very possible to create an accordion component with another framework.',
  }
 ];

 export default data;

Dans le code ci-dessus, nous avons un tableau d’objets contenant les données qui seront affichées dans notre composant accordéon. Le question La propriété contient la question ou le texte d’en-tête, tandis que la propriété answer La propriété contient la réponse ou le contenu qui apparaît lorsque l’on clique ou développe la question. Assurez-vous d’importer le composant dans le Accordion.js déposer. C’est tout pour le AccordionData.js déposer.

Disposition des composants en accordéon

Créons la mise en page de notre composant accordéon.

Il faut d’abord installer react-icons à notre projet depuis le registre npm :

npm install react-icons

Nous devons également importer useState et useRef crochets. Nous pouvons le faire en collant ceci en haut du fichier :

import React, { useRef, useState } from 'react'

La structure HTML sera rendue à l’intérieur du AccordionItem composant. Nous allons passer quatre accessoires dans le AccordionItem component: question, answer, isOpenet onClick.

Décomposons les accessoires pour voir à quoi ils seront nécessaires :

• question. Cet accessoire représente le texte ou le contenu de la partie question de l’élément accordéon.
• answer. Cet accessoire représente le texte ou le contenu de la partie réponse de l’élément accordéon.
• isOpen. Cet accessoire est un booléen qui indique si l’élément accordéon est actuellement ouvert (développé) ou fermé (réduit). Il contrôle si le contenu de la réponse est visible ou masqué.
• onClick. Cet accessoire est une fonction de rappel qui est exécutée lorsque l’utilisateur interagit avec l’élément accordéon. Il est généralement utilisé pour basculer le isOpen indique le moment où l’utilisateur clique sur l’élément pour le développer ou le réduire.

Le corps du composant Accordéon

Au sommet du Accordion.js fichier, assurez-vous d’importer l’icône en forme de flèche à partir du package React-icons, comme ceci :

import { RiArrowDropDownLine } from 'react-icons/ri'

Ce sera la structure d’un seul élément accordéon :

const AccordionItem = ({ question, answer, isOpen, onClick }) => {
 const contentHeight = useRef()
  return(
    <div className="wrapper" >
    <button className={`question-container ${isOpen ? 'active' : ''}`} onClick={onClick} >
     <p className='question-content'>{question}</p>
     <RiArrowDropDownLine className={`arrow ${isOpen ? 'active' : ''}`} /> 
    </button>

     <div ref={contentHeight} className="answer-container" style={
          isOpen
          ? { height: contentHeight.current.scrollHeight }
          : { height: "0px" }
         }>
      <p className="answer-content">{answer}</p>
     </div>
   </div>
  )
}

Dans cet extrait de code, l’élément accordéon se trouve dans un parent <div> avec un nom de classe wrapper. Cette structure permet d’afficher une question et sa réponse de manière pliable.

Nous stockons nos useRef accrocher une variable appelée contentHeight afin qu’il puisse être transmis au ref attribut de notre answer-container élément. Nous faisons cela afin de pouvoir ajuster dynamiquement la hauteur du conteneur en fonction de la hauteur de défilement du contenu de la réponse.

Décomposons la structure du code.

• Élément de bouton (<button>). Il s’agit de la partie interactive de l’élément accordéon sur laquelle les utilisateurs cliquent pour basculer la visibilité de la réponse. Il a un nom de classe question-container. Le nom de la classe est conditionnellement défini sur active si la isOpen prop est vrai, ce qui est utilisé pour styliser le bouton différemment lorsque la réponse est ouverte.

• Contenu des questions. Le contenu de la question consiste en un <p> élément avec une classe question-content. Le texte de la question est tiré de l’accessoire de question.

• Icône de flèche (<RiArrowDropDownLine />). Une icône en forme de flèche utilisée pour basculer s’affiche à droite de la question. Le nom de la classe est conditionnellement défini sur active si la isOpen prop est vrai, ce qui peut être utilisé pour faire pivoter ou styliser la flèche différemment lorsque la réponse est ouverte.

• Réponse div. Suivant le <button>il y a un <div> élément avec le nom de la classe answer-container. Cette division a un ref attribut défini sur le contentHeight variable, ce qui lui permet de mesurer sa scrollHeight. L’attribut style est utilisé pour définir dynamiquement la hauteur de ce conteneur selon que l’élément est ouvert ou fermé. Quand isOpen est vrai, il aura une hauteur égale à celle de son contenu scrollHeight, rendant la réponse visible. Quand isOpen est faux, il a une hauteur de 0pxmasquant le contenu de la réponse.

• Contenu de la réponse. Le contenu de la réponse consiste en un <p> élément avec classe answer-content. Le texte de la réponse est tiré de l’accessoire de réponse.

Styliser notre composant accordéon

Maintenant que nous en avons terminé avec le balisage, stylisons notre composant accordéon. Le style peut être trouvé dans le bloc de code ci-dessous :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #f2f2f2;
}

.container {
  max-width: 650px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper {
  border-bottom: 1px solid black;
  overflow: hidden;
}

.wrapper .question-container {
  width: 100%;
  text-align: left;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.question-container.active {
  color: #1db954;
  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);
}

.wrapper .question-container:hover {
  background-image: linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent);
}

.wrapper .arrow {
  font-size: 2rem;
  transition: .5s ease-in-out;
}

.arrow.active {
  rotate: 180deg;
  color: #1db954;
}

.wrapper .answer-container {
  padding: 0 1rem;
  transition: height .7s ease-in-out;
}

.wrapper .answer-content {
  padding: 1rem 0;
  font-size: 20px;
  font-style: italic;
}

Grâce au style ci-dessus, nous avons maintenant le contour de notre accordionItem. Importons maintenant les données de notre AccordionData fichier et déclarer les fonctionnalités de base de notre composant accordéon. Nous faisons cela à l’intérieur du principal Accordion composant.

Structure principale des composants de l’accordéon

Le code ci-dessous définit le composant fonctionnel nommé Accordion:

const Accordion = () => {
 const [activeIndex, setActiveIndex] = useState(null);

 const handleItemClick = (index) => {
  setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
 };

 return (
  <div className='container'>
    {data.map((item, index) => (
    <AccordionItem
     key={index}
     question={item.question}
     answer={item.answer}
     isOpen={activeIndex === index}
     onClick={() => handleItemClick(index)}
    />
   ))}
  </div>
 )
};

export default Accordion;

Le but de ce composant est de créer une interface de style accordéon qui affiche une liste d’éléments, chacun constitué d’une question et de sa réponse correspondante. L’utilisateur peut cliquer sur une question pour développer ou réduire sa réponse. Décomposons le code étape par étape.

• const [activeIndex, setActiveIndex] = useState(null);. Cette ligne définit un élément de l’état d’un composant en utilisant le useState crochet. activeIndex représente l’index de l’élément accordéon actuellement actif (ouvert), ou null si aucun élément n’est ouvert. setActiveIndex est la fonction utilisée pour mettre à jour cet état.

• const handleItemClick = (index) => { ... }. LehandleItemClick La fonction est responsable de la gestion des clics sur les éléments en accordéon. Il faut un index paramètre, qui représente l’index de l’élément sur lequel vous avez cliqué.

  À l’intérieur de la fonction, setActiveIndex est appelé avec une fonction qui bascule le activeIndex État. Si l’index de l’élément cliqué (index) correspond à l’index actif actuel (prevIndex), il définit activeIndex à null, fermant efficacement l’élément. S’ils ne correspondent pas, cela définit activeIndex à l’index de l’élément cliqué, en l’ouvrant.

  Cette approche garantit qu’un seul élément accordéon peut être ouvert à la fois, car si nous ouvrons un élément accordéon, il ferme tout élément accordéon précédemment ouvert.

• Le return déclaration. Ce composant renvoie du JSX qui définit la structure de l’interface accordéon. Le plus extérieur <div> avec le nom de la classe container est le conteneur pour tous les éléments d’accordéon.

• {data.map((item, index) => ( ... ))}. Ce code mappe sur un tableau appelé data qui est récupéré du AccordionData.js déposer. Pour chaque élément du data tableau, il restitue un AccordionItem composant. Le key prop est réglé sur index pour garantir que chaque élément possède une clé unique pour l’optimisation du rendu de React.

  Le question, answer, isOpenet onClick les accessoires sont transmis au AccordionItem composant. Le question et answer les accessoires contiennent le texte à afficher pour chaque élément. Le isOpen prop est réglé sur true si l’index de l’élément correspond à l’index actuellement actif (indiquant qu’il doit être ouvert), et le onClick prop est une fonction de rappel qui déclenche le handleItemClick fonction lorsque l’élément est cliqué.

• export default Accordion;. Cette ligne exporte le Accordion composant afin qu’il puisse être importé et utilisé dans d’autres parties de notre application. Nous avons déjà rendu le composant dans notre App.js déposer.

En résumé, le Accordion Le composant gère l’état de l’élément accordéon actuellement actif et utilise cet état pour contrôler le comportement d’ouverture et de fermeture. Il génère dynamiquement une liste de AccordionItem des composants basés sur les données obtenues, permettant aux utilisateurs d’interagir avec l’interface accordéon en cliquant sur chacune des questions pour révéler ou masquer leurs réponses.

Notre produit fini

Nous avons maintenant un magnifique composant accordéon entièrement fonctionnel ! 🥳 🎉 Le code source complet de ce tutoriel est disponible sur CodeSandbox.

Conclusion

Dans cet article, nous avons vu comment utiliser React.js pour créer un composant accordéon dynamique et convivial. Les accordéons sont un élément d’interface utilisateur courant permettant d’organiser et d’afficher proprement le contenu.

Nous avons commencé par créer un projet React, organiser le composant et le styliser pour obtenir une apparence finale. Nous avons abordé le fonctionnement interne du système, y compris la gestion de l’état et la gestion des interactions des utilisateurs. De plus, pour des raisons d’évolutivité et de réutilisabilité, nous avons abordé le concept de stockage des données accordéon dans un autre fichier.

J’espère que vous avez maintenant une solide compréhension de la façon de développer un composant accordéon riche en fonctionnalités avec React.js. Bon codage !