react-accordion-collapsible v1.0.53
React Accordion Collapsible
A simple, clean, responsive and highly customizable accordion component for React projects. Does not require the downloading of any external dependencies.
Installing
npm install react-accordion-collapsible
Using the package
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 Example
Examples
Check out some usage examples in the /examples
folder
Props
prop | isRequired | default | type | description |
---|---|---|---|---|
id | no | - | 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 Repository
github.com/yatish1606/react-accordion-collapsible
Customizing the UI
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
.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago