A simple, clean, responsive and highly customizable accordion component for React projects. Find it on npm here
npm install react-accordion-collapsibleThe package does not require the downloading of any external dependencies :)
import React from 'react'
import { Accordion } from 'react-accordion-collapsible'
const Example = () => {
return (
<Accordion
title="Example title for React Accordion Collapsible"
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
/>
)
}
export default ExampleCheck out some usage examples in the /examples folder
| prop | isRequired | default | type | description |
|---|---|---|---|---|
| id | - | - | number |
unique id |
| title | yes | - | string |
title of the accordion |
| content | yes | - | string |
text content of the accordion |
| wrap | - | false |
boolean |
whether to wrap the accordion or let it take full width of parent(default) |
| defaultOpen | - | false |
boolean |
should the accordion be opened(expanded) by default |
| expandIcon | - | + |
ReactElement |
React element to replace the default expand icon (+) |
| collapseIcon | - | - |
ReactElement |
React element to replace the default collapse icon (-) |
| animation | - | true |
boolean |
whether to animate the opening and closing of the accordion |
| animationDuration | - | 0.25 |
number or string |
the animation duration |
| children | - | - | ReactNode |
children of the component, if it is not defined as self closing |
| reverseIconPosition | - | false |
boolean |
reverse the expand and collapse icons positions to left side |
| iconSize | - | 16 | number |
size of expand and collapse icons |
| onClick | - | - | function |
function called when the accordion is clicked |
| onExpand | - | - | function |
function called when the accordion is opened |
| onCollapse | - | - | function |
function called when the accordion is closed |
| activeTitleColor | - | #22242E |
string |
color of the title when accordion is opened |
| contentCharLimit | - | null |
number |
maximum length of the content |
github.com/yatish1606/react-accordion-collapsible
Every UI layer exposes a className property for that HTML element. You can directly include styles for required element in your index.css file or component.css.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent