3.0.1 • Published 6 years ago
react-simple-collapsible-element v3.0.1
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",
// title: <myReactComponent /> this is ok too!
// title: (open) => open ? <PurchaseForm /> : <ProductCard /> this is ok too!
content: "content 1" // content: <PayButton /> or content: (open) => <PayButton isActive={open} />
},
{
// title and content can be a function or non-function.
// open props is only true when the children which is content is open.
title: open => (
<h1 style={{ color: open ? "orange" : "white " }}>title 2</h1>
),
// title: <h1>title 2</h1> this is ok too!
contentStyle: { backgroundColor: "red" }, // can be a classname also.
activeContentStyle: "activeContentStyle", // classname
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' }, // can be a classname also.
activeTitleStyle: 'activeTitleStyle',
contentStyle: { backgroundColor: 'red' }, // can be a classname also.
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. |
3.0.1
6 years ago
3.0.0
6 years ago
2.0.11
7 years ago
2.0.10
7 years ago
2.0.9
7 years ago
2.0.8
7 years ago
2.0.7
7 years ago
2.0.6
7 years ago
2.0.5
7 years ago
2.0.4
7 years ago
2.0.0
7 years ago
1.2.11
7 years ago
1.2.10
7 years ago
1.2.9
7 years ago
1.2.8
7 years ago
1.2.7
7 years ago
1.2.6
7 years ago
1.2.5
7 years ago
1.2.4
7 years ago
1.2.3
7 years ago
1.2.2
7 years ago
1.2.1
7 years ago
1.2.0
7 years ago