react-expandable

Installing

$ npm install react-expandable --save

Demos

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>
);

| 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: numberdamping: numberprecision: 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