React Expand/Collapse Example Project

LIVE

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with yarn) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/ahmetkuslular/react-expand-collapse-example.git

# Go into the repository
$ cd react-expand-collapse-example

# Install dependencies
$ yarn

# Run the app
$ yarn start

# Run the test
$ yarn test

Usage

example - children:

const Example = (
  <Collapse>
    <CollapseItem header="Collapse - 1" >this is collapse item content</CollapseItem>
    <CollapseItem header="Collapse - 2">this is collapse item content2 or other</CollapseItem>
  </Collapse>
);
ReactDOM.render(Example, container);

example - data:

const data = [
    {id: 1, name: 'ahmet', age:24 },
    {id: 2, name: 'mehmet', age:21 },
    {id: 3, name: 'merve', age:21 }
]

function _renderItem({item}) {
  return (
    <CollapseItem label={item.name}>{item.name} - {item.age}</CollapseItem>
  )   
}

const Example = (
  <Collapse data={data} renderItem={_renderItem}>
    <CollapseItem label="Collapse - 1" >this is collapse item content</CollapseItem>
    <CollapseItem label="Collapse - 2">this is collapse item content2 or other</CollapseItem>
  </Collapse>
);
ReactDOM.render(Example, container);

API

Collapse

props:

name	type	default	description	REQUIRED
data	Array	-	For simplicity, data is just a plain array	No
renderItem	function	-	Takes an item from data and renders it into the list.	No / if data is available Yes
onChange	function	-	Callback function executed when active panel is changed.	No
activeKey	string[]|string| number[]|number	-	Key of the active panel	No
defaultActiveKey	string[]|string| number[]|number	-	Key of the initial active panel	No
children	node (CollapseItem)	-		No

CollapseItem

props:

name	type	default	description	REQUIRED
label	string or node	-	Header content of CollapseItem	No
labelStyle	object	-	Custom label style	No
headerStyle	object	-	Custom header style	No
icon	node	arrow icon	specific the custom icon.	No
showIcon	boolean	true	show icon beside header	No
useIconAnimation	boolean	true(using default animation- rotate 90)	use icon animation	No
animationOptions(only for icon)	object	{ duration:500, animationZ:90}	https://github.com/google-fabric/velocity-react	No
openColor	string	#f50	Custom open color	No
closeColor	string	#b5b5b5	Custom close color	No

Packages

This software uses the following open source packages:

• react

TODO...

• Diffrent type(tree, etc)