react-accordion-customizable

react-accordion-customizable

React Accordion Customizable

Simple Customizable React Accordion Component

Example

Github

https://github.com/georgeCXG/react-accordion-customizable

Install

npm install --save react-accordion-customizable

Usage

import { Accordion } from 'react-accordion-customizable';

const Component = () => {
    return (
        <div>
            <Accordion onChangeStatus={(status) => setState(status)}>
                <Accordion.Item label="Label_1">
                    <Component />
                </Accordion.Item>
                <Accordion.Item label="Label_2">
                    <Component />
                </Accordion.Item>
            </Accordion>
        </div>
    );
};

Props

Accordion Props

name	type	default	description
multipleOpen	Boolean	false	Open multiple Accordions at the same time
onChangeStatus	Function	(status) => void;	Call when status of accordion changed
initialOpen	Array	[null]	On load accordion is open. It can be multiple accordions e.g. [0,1,2]

Accordion Item PROPS

name	type	default	description
label	String		The name of the label
labelPosition	String	'start'	Justify position, options ['start','end','between','center']
labelReverse	Boolean	false	Reverse the inital position
iconsLeft	Array	[null]	Multiple icons on the left side as [JSX,JSX]
iconsRight	Array	[null]	Multiple icons on the right side as [JSX,JSX]
iconSize	Number	20	Size of the initial icon
secondaryIcon	JSX.Element	null	Secondary Icon
removeDefaultIcon	Boolean	false	Remove the initial default icon
removeAnimation	Boolean	false	Remove the default animation
transitionAnimation	Number	200	Duration of the animation in MS
removeAnimationIcon	Boolean	false	Remove the initial animation on default icon
style	CSS	null	Adds styling on item accordion

License

react-accordion-customizable is released under the MIT license.