react-expandable
Installing
$ npm install react-expandable --save
Demos
Example
;;; const Item = styleddiv` display: flex; padding: 12px;`; const ItemHeader = styleddiv` display: flex; align-items: center; justify-content: space-between; padding: 12px;`; const ItemTitle = styleddiv``; const ItemIcon = styleddiv``; <Expandable headers= <ItemHeader> <ItemTitle>Tab1</ItemTitle> <ItemIcon>isOpened ? '-' : '+'</ItemIcon> </ItemHeader> <ItemHeader> <ItemTitle>Tab2</ItemTitle> <ItemIcon>isOpened ? '-' : '+'</ItemIcon> </ItemHeader> <ItemHeader> <ItemTitle>Tab3</ItemTitle> <ItemIcon>isOpened ? '-' : '+'</ItemIcon> </ItemHeader> enableMultiOpen > <Item> first item<br /> first item<br /> first item<br /> </Item> <Item> second item </Item> <Item> third item </Item> </Expandable>;
Property | Type | Default | Description |
---|---|---|---|
children* | arrayOf (element) | An array of react elements, these are the tabs. | |
headers* | arrayOf (func) | An array of functions that returns react elements. | |
The function will be called with an object that has isOpened option. |
|||
springOptions | shape {stiffness: number damping: number precision: number } |
React motion configurations. | |
More about this here |
|||
enableMultiOpen | bool | false | Whether you want to enable multiple opens or not. |
Contributing
To contribute, follow these steps:
- Fork this repo.
- Clone your fork.
- Run
npm install
- Run
npm start
- Goto
localhost:3000
- Add your patch then push to your fork and submit a pull request
License
MIT