react-accordion

A customizable and accessible accordion made with React.

Installation

npm i @anedomansky/react-accordion

Usage example

<Accordion>
    <AccordionItem>
        <AccordionSummary onClick={(opened) => console.log(opened)}>
            Summary 1
        </AccordionSummary>
        <AccordionContent>
            Accordion-Content 1
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionSummary>
            <span>Summary 2</span>
        </AccordionSummary>
        <AccordionContent>
            Accordion-Content 2
        </AccordionContent>
    </AccordionItem>
    <AccordionItem>
        <AccordionSummary>
            Summary 3
        </AccordionSummary>
        <AccordionContent>
            <p>Accordion-Content 3</p>
        </AccordionContent>
    </AccordionItem>
</Accordion>

Props

<Accordion>

Name	Type	Description	Default
classNameContainer	string	Custom CSS-Classes for the <section>-tag	accordion
dataTestId	string	ID for testing purposes (e.g. Jest)

<AccordionItem>

Name	Type	Description	Default
classNameItem	string	Custom CSS-Classes for the <details>-tag	accordion__item item
dataTestId	string	ID for testing purposes (e.g. Jest)

<AccordionSummary>

Name	Type	Description	Default
classNameSummary	string	Custom CSS-Classes for the <summary>-tag	item__summary
dataTestId	string	ID for testing purposes (e.g. Jest)
onClick	(opened: boolean) => void	Callback for the 'click'-Event on the <summary>-tag

<AccordionContent>

Name	Type	Description	Default
classNameContent	string	Custom CSS-Classes for the <div>-tag
dataTestId	string	ID for testing purposes (e.g. Jest)