@anedomansky/react-accordion NPM

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)

React TypeScript

@infinitebrahmanuniverse/nolb-_ane @everything-registry/sub-chunk-66

1.0.1

3 years ago

1.0.0

3 years ago