Accordion component

Instruction d'installation :

npm i react-accordion10

exemple de code avec les class à compléter pour mettre en forme l'accordion.

le fichier json sera dans le répertoire public.

            <Accordion10 title="titre" content="contenu" />



            <div className="w-1/2 mx-auto">
              <h2 className="text-center mt-10">defaut</h2>
              <Accordion10 
                title="titre" content="contenu" 
                classes={{
                accordionHeading: "flex justify-between items-center w-full p-4 bg-indigo-500 text-white cursor-pointer border border-red-700 rounded-t-md"}}
              />
            </div>



            <div className='w-full'>
              <Accordion10 title="titre" content="contenu"/>
            </div>

title = le titre qui s'affiche lorsque l'accordion n'est pas ouvert

content = celui ci s'affiche lors du clic sur la partie titre et fait apparaître le texte contenu dans l'accordion.

accordion body est la class pour le corps de l'accordion

accordionHeading est celle pour le titre

accordionText est celle du contenu

Pour l'instant je n'ai pas mis d'icone dans la partie titre.

le code du composant et les classes par défaut :

              import { useState, useEffect, useRef } from "react";
              import PropTypes from "prop-types";

              const defaultClasses = {
                accordionBody: "mx-auto mt-8 bg-gray-200 rounded-b-md",
                accordionHeading: "flex justify-between items-center w-full p-4 bg-red-400 text-white cursor-pointer border border-blue-700 rounded-t-md",
                accordionText: "p-6 text-gray-700 text-2xl italic",
                spanButton: "text-xl"
              };

              export default function Accordion10({
                title,
                content,
                classes = {}
              }) {
              const [toggle, setToggle] = useState(false);
              const [heightEl, setHeightEl] = useState();
              const refHeight = useRef();

              // Fusionner les classes par défaut avec les classes fournies par l'utilisateur
              const mergedClasses = { ...defaultClasses, ...classes };

              useEffect(() => {
                setHeightEl(`${refHeight.current.scrollHeight}px`);
              }, [toggle]); // Recalculer la hauteur lorsque l'état change

              const toggleState = () => {
              setToggle(!toggle);
                };

              return (
                <div className={mergedClasses.accordionBody}>
                  <button onClick={toggleState} className={mergedClasses.accordionHeading}>
                  <span className={mergedClasses.spanButton}>{title}</span>
                  </button>
                  <div
                    className={`overflow-hidden transition-all duration-300 ease-in-out ${
                    toggle ? "opacity-100" : "opacity-0 h-0"
                    }`}
                    style={{ height: toggle ? heightEl : "0px" }}
                    ref={refHeight}
                  >
                    <p className={mergedClasses.accordionText}>{content}</p>
                  </div>
                </div>
              );
              }

              Accordion10.propTypes = {
                title: PropTypes.string,
                content: PropTypes.string,
                classes: PropTypes.shape({
                  accordionBody: PropTypes.string,
                  accordionHeading: PropTypes.string,
                  accordionText: PropTypes.string,
                  spanButton: PropTypes.string,
              }),
              };