react-simple-collapsible-element
Demo
See example for demo, npm install and npm start
Why use this?
Simple, Lightweight, Production-ready, has all the common use cases covered. Data for the collapsible can be jsx or
pure JSON data coming from a CMS by non-technical people.
Install
$ npm install react-simple-collapsible-element --save
Usage
$ Production-ready Simple react collapsible supports nested element and custom styling.
example1.
import Collapsible from " react-simple-collapsible-element " ;
const data = [
{
title : " title 1 " ,
content : " content 1 "
} ,
{
title : open => (
< h1 style = { { color : open ? " orange " : " white " } } > title 2 < / h1 >
) ,
contentStyle : { backgroundColor : " red " } ,
activeContentStyle : " activeContentStyle " ,
content : open => (
< ul >
< li > { open ? " This content is currently open " : " " } < / li >
< li > content 2 < / li >
< li > content 2 < / li >
< / ul >
)
}
] ;
return < Collapsible data = { data } / > ;
example2.
import Collapsible from ' react-simple-collapsible-element ' ;
const data = [
{
title : ( open ) => < h1 > title 1 { open ? ' this is current opened! ' : ' its close ATM ' } < / h1 > ,
content : < span > content 1 < / span > ,
contentStyle : ' content-class '
} ,
{
title : ' title 2 ' ,
content : [
{
title : ' title 2 title 1 ' ,
content : ' title 2 title 1 content ' ,
titleStyle : { backgroundColor : ' black ' } ,
activeTitleStyle : ' activeTitleStyle ' ,
contentStyle : { backgroundColor : ' red ' } ,
activeContentStyle : ' activeContentStyle '
}
]
}
] ;
return < Collapsible keepOpen = { true or false } data = { data } / > ;
Title and Content as a function
When title and content are functions, it takes a boolean as a params, it is false by default if the Collapsible is current closed.
Props
Name
Type
Default
Description
title
Element, function, string
'div'
parent
content
Element, string, function, array
div
child
keepOpen
bool
false
whether or not keep the current element open when click on other element
customTransition
String
height .3s ease-out
custom transition
titleStyle
String / Object
undefined
Can be a style object or multiple classnames together.
contentStyle
String / Object
undefined
Can be a style object or multiple classnames together.
activeTitleStyle
String
undefined
a classname to pass to when the title is active.
activeContentStyle
String
undefined
a classname to pass to when the content is active.