react-expandable
Installing
$ npm install react-expandable --save
Example
import React from 'react';
import Expandable from './index';
import styled from 'styled-components';
const Item = styled.div`
display: flex;
padding: 12px;
`;
const ItemHeader = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
`;
const ItemTitle = styled.div`
`;
const ItemIcon = styled.div`
`;
export default () => (
<Expandable
headers={[
({ isOpened }) => (
<ItemHeader>
<ItemTitle>Tab1</ItemTitle>
<ItemIcon>{isOpened ? '-' : '+'}</ItemIcon>
</ItemHeader>
),
({ isOpened }) => (
<ItemHeader>
<ItemTitle>Tab2</ItemTitle>
<ItemIcon>{isOpened ? '-' : '+'}</ItemIcon>
</ItemHeader>
),
({ isOpened }) => (
<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>
);
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