accordio
accordio is a very simple and basic accordion react component to be used in any react project. There is a basic style applied with minimal markup required to use.
Installation
You can install accordio in your project using npm:
npm install accordio
Usage
Then to use accordio you will need to import the different accordio components into the component that you require an accordion:
import 'accordio/styles/accordio.min.css';
import {
Accordio,
AccordioItem,
AccordioHeading,
AccordioContent
} from 'accordio';
There are 4 components that build up the accordion as show in the above import, the structure that this follows in your component is:
<Accordio>
<AccordioItem index={0}>
<AccordioHeading>Heading</AccordioHeading>
<AccordioContent>Content</AccordioContent>
</AccordioItem>
</Accordio>
The index
prop on AccordioItem
is required as it is used to handle which item is open and what should get opened on click.
You can have as many AccordioItem
's as you want, just ensure each one has an index
prop set (and they are different) and that it contains the AccordioHeading
and AccordioContent
components as children.
Recommendation
In the demo site, I have created a wrapper component that takes in an array of children that then gets looped over and creates an AccordioItem
for each child. Avoids having to repeat yourself, which is always good and because of the loop, you automatically have the index
prop that you can pass into it.
Here's what the code would look like:
<Accordio>
{items.map((item, index) => (
<AccordioItem key={index} index={index}>
<AccordioHeading>{item.heading}</AccordioHeading>
<AccordioContent>{item.content}</AccordioContent>
</AccordioItem>
))}
</Accordio>