@anedomansky/react-accordion
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

react-accordion

License: MIT

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)

Readme

Keywords

Package Sidebar

Install

npm i @anedomansky/react-accordion

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

18.8 kB

Total Files

13

Last publish

Collaborators

  • anedomansky