Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emmytobs/react-accordion-library
A fully-featured and composable accordion component. Built entirely using React.js
https://github.com/emmytobs/react-accordion-library
accordion accordion-component javascript javascript-library js react reactjs
Last synced: 20 days ago
JSON representation
A fully-featured and composable accordion component. Built entirely using React.js
- Host: GitHub
- URL: https://github.com/emmytobs/react-accordion-library
- Owner: Emmytobs
- License: mit
- Created: 2021-03-26T21:08:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-06T23:20:42.000Z (almost 3 years ago)
- Last Synced: 2025-01-31T22:44:15.041Z (20 days ago)
- Topics: accordion, accordion-component, javascript, javascript-library, js, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 16.6 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-accordion-library
A fully-featured, composable and extendable React accordion library.
#### Note: This package was built using the react hooks API introduced in React 16, which means react versions prior to that are not compatible with this package.
# Documentation
NB: You can also find it on [npm](https://www.npmjs.com/package/react-accordion-library)
There are four components that can be used to create custom accordions. Starting from top to bottom:
- Accordion
- AccordionItem
- Title
- Content
## Accordion
The `Accordion` component is the top-level component. It provides a wrapper around the `AccordionItem` component.
```javascript
import { Accordion } from "react-accordion-library";
function CustomAccordion() {
return (
{/*
....
*/}
);
}
```
## AccordionItem
The `AccordionItem` component is the direct child under `Accordion` component. You must have at least one `AccordionItem` component nested within the top-level Accordion component, else you will get an error.
The `AccordionItem` component is designed using the render props approach of react component design. It takes a function as its direct child which is called in the Accordion component and passed an argument `contentIsVisible`, and returns some JSX. The argument has a boolean value and it represents a piece of state that tells the AccordionItem whether it has been clicked on or not, which tells the component to collapse the `Content` or not to. This also means you can also use the `contentIsVisible` argument to implement certain visual cues when the accordion item has been collapsed or not. For example, you can set an arrow icon to point upwards or downwards depending on the whether the content is visible (or is unfolded) or not visible (or is collapsed)
Example:
```javascript
import { Accordion, AccordionItem } from "react-accordion-library";
function CustomAccordion() {
return (
{(contentIsVisible) => {
return <>{/* Some JSX */}>;
}}
);
}
```
You can put anything within the return of the function nested within AccordionItem as you deem fit for your use case. But to get the actual accordion functionality, you will need two child components under `AccordionItem`: `Title` and `Content`
## Title
The `Title` component is nested within the return of the function under AccordionItem. It represents the visible part of the accordion when an accordion item has been collapsed. You can put any JSX within the opening and closing tags
Example:
```javascript
{(contentIsVisible) => {
return (
<>
Our mission
>
);
}}
```
## Content
The `Content` component is also nested within the return of the function under AccordionItem. It represents the collapsible part of the accordion item. Hence, it is hidden when an item is collapsed.
Example:
```javascript
{(contentIsVisible) => {
return (
<>
Our mission
Our mission is to be Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Officiis atque quam laboriosam est sint animi
reprehenderit repudiandae debitis dolores natus!
>
);
}}
```
A full example of an accordion built using this package is shown below:
```javascript
import { Accordion, AccordionItem, Title, Content } from "react-accordion-library";
import arrowUp from "./arrow-up-icon.png"
function CustomeAccordion() {
return (
{
(contentIsVisible) => (
Why we exist
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab numquam itaque veritatis cumque placeat laborum maiores optio quo at facilis! Eos, fuga maiores dolores labore qui corporis temporibus ad provident.
)
}
)
}
```
Since you will need to have multiple AccordionItem components under the parent Accordion component, it will be easier to arrange the dynamic parts of each accordion item in an array of objects instead of having many AccordionItem siblings:
```javascript
import { Accordion, AccordionItem, Title, Content } from "react-accordion-library";
import arrowUp from "./arrow-up-icon.png" // Assume it is an image stored in your project
function CustomeAccordion() {
const accordionItems = [
{
title: 'Our mission',
content: 'Our mission is to be Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis atque quam laboriosam est sint animi reprehenderit repudiandae debitis dolores natus!'
},
{
title: 'Why we exist',
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab numquam itaque veritatis cumque placeat laborum maiores optio quo at facilis! Eos, fuga maiores dolores labore qui corporis temporibus ad provident.'
}
]
return (
{
accordionItems.map((item, index) => {
return (
{
(contentIsVisible) => (
{item.title}
{item.content}
)
}
)
})
}
)
}
```