react-headless-accordion
v1.0.2
Published
A headless nested accordion made with react
Downloads
7,006
Maintainers
Readme
📦 React headless accordion
React-headless-accordion is a set of simple components ready to be inserted into your project. These unstyled components allow you to make a nested chord that matches the style you want.
Features
- ✅ Infinite nesting of the accordion
- ✅ Customization of the accordion style
- ✅ Accordion elements remain open when another element is open (Optional).
- ✅ Default opening of some element (Optional).
Why ❔
An accordion with the above characteristics is above all indispensable in many projects. It will be useful on a project where you have to make an accordion from scratch.
With react-headless-accordion we only focus on the style of the accordion rather than implementing all that logic.
Examples of online usage
You can find examples of use at here
Install
You can use yarn
yarn add react-headless-accordion
Or via npm
npm install react-headless-accordion
Make sure you have installed the peer dependencies as well with the below versions.
"react": "^18.2.0"
Usage
This component also exports a tiny CSS file built by tailwind. All CSS classes used in designing and customizing the select component are all custom tailwind classes which ensures that an existing tailwind project would not need to include this CSS file again.
Basic example
The accordion is built using the components Accordion
, AccordionItem
, AccordionHeader
and AccordionBody
.
Clicking on AccordionHeader
will automatically open the AccordionBody
with a transition.
import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion";
const App = () => {
return (
<Accordion>
<AccordionItem>
<AccordionHeader>
<h3 className={`accordion-title`}>Title 1</h3>
</AccordionHeader>
<AccordionBody>
<div className="accordion-body">
Lorem ipsum dolor sit amet.
</div>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader>
<h3 className={`accordion-title`}>Title 2</h3>
</AccordionHeader>
<AccordionBody>
<div className="accordion-body">
Lorem ipsum dolor sit amet.
</div>
</AccordionBody>
</AccordionItem>
</Accordion>
);
};
export default App;
Nested accordion
If you want to nest an accordion in another one, just put an AccordionItem in an AccordionBody.
<Accordion>
<AccordionItem>
<AccordionHeader>
<h3 className={`accordion-title`}>Title 1</h3>
</AccordionHeader>
<AccordionBody>
<div className="accordion-body">
<AccordionItem>
<AccordionHeader>
<h3 className={`accordion-title`}>Title 1</h3>
</AccordionHeader>
<AccordionBody>
<div className="accordion-body">
Lorem ipsum dolor sit amet.
</div>
</AccordionBody>
</AccordionItem>
</div>
</AccordionBody>
</AccordionItem>
</Accordion>
Info
👉 You can nest one accordion in another infinitely.
Styling different states
Each AccordionItem
exposes an open
variable about its current state via render props that you can use to conditionally apply different styles or render different content.
import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion";
const App = () => {
const data = [
{title: "Title 1", content: "Lorem ipsum dolor sit amet."},
{title: "Title 2", content: "Lorem ipsum dolor sit amet."},
{title: "Title 3", content: "Lorem ipsum dolor sit amet."},
];
return (
<Accordion>
{data.map((item, index) => (
<AccordionItem key={index}>
{({open}) => (
<>
<AccordionHeader>
<h3 className={`accordion-title ${open ? 'accordion-active' : ''}`}>{item.title}</h3>
</AccordionHeader>
<AccordionBody>
<div className="accordion-body">
{item.content}
</div>
</AccordionBody>
</>
)}
</AccordionItem>
))}
</Accordion>
);
};
export default App;
Rendering a different tag for accordion components
By default, the components provided by react-headless-component except AccordionItem
have a default tag. But you can change them.
| Components | Default Tags |
|-------------------|--------------|
| Accordion
| div
|
| AccordionHeader
| button
|
| AccordionBody
| div
|
If you want to change the tag of one of the react-headless-accordion components you can use the Props as.
Example AccordionBody
<AccordionBody as={"ul"}>
Lorem ipsum dolor sit amet.
</AccordionBody>
Styling accordion
All components exposed by react-headless-accordion except AccordionItem
offer a Props className
to style them.
Example using Tailwindcss
import {Accordion, AccordionBody, AccordionHeader, AccordionItem} from "react-headless-accordion";
import {Chevron} from "../components"
const App = () => {
return (
<Accordion transition={{duration: "300ms", timingFunction: "cubic-bezier(0, 0, 0.2, 1)"}}>
<AccordionItem>
{({open}) => (
<>
<AccordionHeader className="w-full flex justify-between items-center text-gray-600 border-b p-4">
<span>What is react-headless-accordion?</span>
<svg class={`w-6 h-6 ${!open ? '' : 'rotate-90'}`} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" /></svg>
</AccordionHeader>
<AccordionBody>
<div className="p-5 font-light">
Lorem ipsum dolor sit amet.
</div>
</AccordionBody>
</>
)}
</AccordionItem>
</Accordion>
);
};
export default App;
Transition
To animate the opening/closing of the accordion, use the Props transition available on the Accordion component.
<Accordion transition={{duration: "300ms", timingFunction: "cubic-bezier(0, 0, 0.2, 1)"}}>
<AccordionItem>
<AccordionHeader>{/* ... */}</AccordionHeader>
<AccordionBody>{/* ... */}</AccordionBody>
</AccordionItem>
</Accordion>
Props
Accordion
| Props | Type | Default | Description |
|--------------|-----------|---------------------------------------------------------------------|--------------------------------------------------------|
| as
| String
| div
| The HTML tag that will be used to render Accordion
. |
| alwaysOpen
| Boolean
| false
| Accordion items stay open when another item is opened. |
| className
| string
| `` | CSS classes to style the component |
| transition
| Object
| {duration: "300ms", timingFunction: "cubic-bezier(0, 0, 0.2, 1)"}
| The transition of opening / closing of the accordion. |
AccordionItem
| Props | Type | Default | Description |
|------------|-----------|---------|--------------------------------------------------------------|
| isActive
| Bollean
| false
| Indicates if the AccordionItem
is open / closed by default |
Info
👉 To avoid any unexpected behavior. Remember not to be
isActive
to true for Accordion of the same level while thealwaysOpen
is not to true..
AccordionHead
| Props | Type | Default | Description |
|-------------|------------|-------------|------------------------------------------------------------|
| as
| String
| button
| The HTML tag that will be used to render AccordionHead
. |
| className
| string
| `` | CSS classes to style the component. |
| onClick
| Function
| undefined
| This function is called when you click on AccordionHead
. |
AccordionBody
| Props | Type | Default | Description |
|-------------|----------|----------|-----------------------------------------------------------|
| as
| String
| button
| The HTML tag that will be used to render AccordionBody
. |
| className
| String
| button
| CSS classes to style the component. AccordionBody
. |
Contributing
Got ideas on how to make this better? Open an issue!
Thanks
These components are inspired by the react version of headlessui headlessui.
I thank you in advance for your contribution to this project.
License
MIT Licensed. Copyright (c) Lewhe Onesine 2022.