Simple lightweight accordion component

by React

react-collapsy

Simple lightweight (1.5kb minified+gzipped) accordion component.

Usability

This plugin require for you to have react, after that import react-collapsy

import Accordion from 'react-collapsy';

and include css files

require('../node_modules/react-collapsy/lib/index.css');

Usage

After you imported libs, somewhere in your component's code:

<Accordion>
    <span>Some content</span>
</Accordion>

props/options

isOpen

If passed Accordion will be render expanded

<Accordion isOpen />

onToggle

onToggle will fire after Accordion expands/collapses with boolean value passed in which will indicated if Accordion is open or closed (true, false)

<Accordion onToggle={isOpen => console.log('Is Accordion open?:', isOpen) } /> // if expanded true will be passed

title

If passed title will be displayed

<Accordion title='Some title' />

headerClass/contentWrapperClass

If passed classes will be added to header div and content wrapper div, respectfully. (e.g. 'Accordion__header ' + this.props.headerClass)

<Accordion headerClass='YourCustomHeaderClass' contentWrapperClass='YourCustomAccordionContentClass' />

Example project

Clone/download the repo followed by npm (i) install && npm start, so you can check this magnificent component in local. If you have any comment, suggestion, issue, please report it, as I will try to keep this component alive.

GitHub