React-Collapsible-Accordion

A React Collapsible and Accordion Component. You can easily implement collapsible and accordion with smooth transitions.

Demo

You can try the demo Here.

Installation

Install using npm:

npm install --save react-collapsible-accordion

Install using yarn:

yarn add react-collapsible-accordion

Usage

// Import from the library
import {Collapsible,Accordion,AccordionItem} from 'react-collapsible-accordion';

// use collapsible in your component
<Collapsible  Title="My Title">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto numquam temporibus beatae recusandae in quisquam ipsa aperiam natus libero, ad labore quod
 a similique facilis non rerum dolor voluptatem odit eveniet repellendus deserunt? Minima, commodi odio. Nulla sint molestiae delectus debitis sed
 reiciendis fugiat! Velit itaque quis enim dolore maxime!
</Collapsilble>

// or use Accordion
<Accordion allowMultipleOpen={true}>
    <AccordionItem Title="one">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto numquam temporibus beatae recusandae in quisquam ipsa aperiam natus libero, ad labore quod
      a similique facilis non rerum dolor voluptatem odit eveniet repellendus deserunt? Minima, commodi odio. Nulla sint molestiae delectus debitis sed
      reiciendis fugiat! Velit itaque quis enim dolore maxime!
    </AccordionItem>
    <AccordionItem Title="two" >
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat ratione laudantium quo, nobis dolorem, dicta eum doloribus sunt corporis illo numquam hic,
      at totam id expedita debitis fugit saepe mollitia?
    </AccordionItem>
    <AccordionItem Title="three">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto numquam temporibus beatae recusandae in quisquam ipsa aperiam natus libero, ad labore quod
      a similique facilis non rerum dolor voluptatem odit eveniet repellendus deserunt? Minima, commodi odio. Nulla sint molestiae delectus debitis sed
      reiciendis fugiat! Velit itaque quis enim dolore maxime!
    </AccordionItem>
  </Accordion>

API

Below we have all the props that we can use with the <Collapsible> component.

Name	Type	Default	Description
Title	string / ComponentType<{}>		title of the collapsible item. Title can be a string or you can provide a custom component.
Icon	string / ComponentType<{}>		Icon can be a font icon class name (string) or a component. if you don't provide it, there will be a default Icon
open	boolean	false	is the collapsible opened or closed by default.
onClick	function	() => void	Optional click handler.
className	string		Custom class name for the outer div.

Below we have all the props that we can use with the <AccordionItem> component.

Name	Type	Default	Description
Title	string / ComponentType<{}>		title of the collapsible item. Title can be a string or you can provide a custom component.
Icon	string / ComponentType<{}>		Icon can be a font icon class name (string) or a component. if you don't provide it, there will be a default Icon
open	boolean	false	is the collapsible opened or closed by default.
className	string		Custom class name for the outer div.

Below we have all the props that we can use with the <Accordion> component.

Name	Type	Default	Description
allowMultipleOpen	boolean	false	set it to true if you want to be able to view multible items opened at the same time.
className	string		Custom class name for the outer div.

License

React Collapsible Accordion is licensed under MIT license, see LICENSE for the full license.