react-super-accordion
A hackable super simple accordion that you can customise completely to the core. It can't get more customisable than this.
Installation:
yarn add react-super-accordion
or
npm i react-super-accordion --save
Usage
Basic usage:
import React Component from 'react';import Accordion from 'react-super-accordion'; { return <div => <Accordion ="This is the accordion head"> Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </Accordion> </div> ; } ;
Event Handler
Accordion also has a prop onToggle
which can be used to pass in a callback function to execute when the accordion is toggled.
<Accordion ="Hello World" =>...some body...</Accordion>
The above example would print on the console the state of the accordion on toggle
{expanded: true} // when the accordion expands
CUSTOMIZATION
Customizing the body of the accordion: Since the body is a text/component that you provide, this one is pretty straight forward. Just add any component as the child for Accordion and that becomes the body. so Body is under your complete control.
<Accordion ="The head text of the accordion"> <CustomBodyComponent /> //Your custom body</Accordion>
Customizing the head of the accordion: To customize the head of the accordion simply pass a Custom React component to the Accordion via the prop headComponent
to render a custom Head component.
For example:
<Accordion =>... some body ...</Accordion>
Note that Accordion would pass two props to the CustomHeadComponent
- expanded : This is a
Boolean
which specifies whether the accordion is in expanded state or collapsed state (true for expanded and false for collapsed). - toggle : This is a function to toggle the expanded state of the accordion.
Either you can directly call toggle like
toggle()
- In which case it will just toggle the state of accordion or You can optionally pass a boolean to thetoggle(true)
to make the Accordion expand ortoggle(false)
to make the accordion collapse.
Complete example for a custom Accordion Head
import React Component from 'react';import Accordion from 'react-super-accordion'; const styles = container : flex: 1 backgroundColor:'lightseagreen' color:'white' borderRadius:'15px' display: 'flex' border: '1px solid lightgrey' padding: '10px' cursor: 'pointer' fontFamily: 'helvetica' fontWeight: 'bold' userSelect: 'none' flexDirection: 'row' sideArrowExpanded : textAlign: 'right' transition: 'transform 0.25s' sideArrow : textAlign: 'right' transform: 'rotateZ(-180deg)' transition: 'transform 0.25s' title : display: 'flex' flexGrow: 1 justifyContent: 'center' alignItems: 'center' //CREATING A CUSTOM HEAD COMPONENT Component { const text ...accorionProps = thisprops; const expanded toggle = accorionProps; //Basically Accordion would pass two props to the custom header 1. expanded 2. toggle return <div = = > <div => text || 'Hello World' </div> <div => ⌃ </div> </div> } { return <div => <Accordion = => /* OR */ /* <Accordion onToggle={console.log} headComponent={(accordionProps)=><CustomHeadComponent {...accordionProps} text={'My custom header'} />}> */ /* OR even*/ /* <Accordion onToggle={console.log} headComponent={CustomHeadComponent}> */ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </Accordion> </div> ; } ;
The above custom Accordion looks like this:
CONTRIBUTORS
Peace ! ✌🏻🍻