1.0.3 • Published 6 years ago
react-accordion-feature v1.0.3
React Accordion Component
This is a Accordion Component developed in React JS.
Below are the
features
of this component:
- one panel to be expanded at a time
- multiple panels to be expanded at a time
- allows
n
level of nesting of accordions- pre expanded panel/panels on page load
- accessible with keyboard
- minimal css which holds the structure of the component
- allows custom HTML
Install
npm install --save react-accordion-feature
How to include this component
import Accordion from 'react-accordion-feature'
How to use this component
<Accordion customClass="accordionWrapper"> <Accordion.Pane title="This is first accordion"> <div> <h4>This is the first content title</h4> <p> {`Content goes here.`} </p> </div> </Accordion.Pane> <Accordion.Pane title="This is the second accordion"> <div> <h4>This is the second content title</h4> <p> {`Content goes here.`} </p> </div> </Accordion.Pane> <Accordion.Pane title="This is the third accordion"> <div> <h4>This is the third content title</h4> <p> {`Content goes here.`} </p> </div> </Accordion.Pane> </Accordion>
Props that can be passed to the component
customClass
="accordionWrapper otherclasses" accordionWrapper needs to be passed to hold the minimal structure of the component
mutiplePane
- allows multiple panels to be expanded at a timeactivePane
={0, 1} - pass the pane/panes index that needs to be expanded by default on page loadhasCustomIcon
(Boolean) - by default+
and-
icons are displayed, if you want your own icons, pass this flag and then you can add you icons using css class