🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-expandable

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-expandable

ReactExpandable

1.0.2
latest
Source
npm
Version published
Weekly downloads
3
200%
Maintainers
1
Weekly downloads
 
Created
Source

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>
);
PropertyTypeDefaultDescription
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.
springOptionsshape {
stiffness: number
damping: number
precision: number
}
React motion configurations.

More about this here
enableMultiOpenboolfalseWhether 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

Keywords

react-expandable

FAQs

Package last updated on 15 Jun 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts