Package Exports

react-collapsed

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-collapsed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React-Collapsed

A small (< 2.5kb), headless component for creating flexible and accessible expand/collapse components.

Features

Handles the height of animations of your elements, auto included!
You control the UI - with prop-getters, you give ReactCollapsed's logic to your elements
Built with accessibility in mind - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
Small footprint (< 2.5kb gzipped)
No animation framework required! Simply powered by CSS animations

Demo

See the demo site!

Installation

$ yarn add react-collapsed
# or
$ npm i react-collapsed

Usage

Simple Usage

You can let ReactCollapsed handle the expanding and closing for you:

import Collapse from 'react-collapsed';

<Collapse>
  {({getCollapseProps, getTogglerProps, isOpen}) => (
    <React.Fragment>
      <button {...getTogglerProps()}>Toggle Collapse</button>
      <div {...getCollapseProps()}>
        {isOpen ? `I'm visible!` : `You can't see me!`}
      </div>
    </React.Fragment>
  )}
</Collapse>;

Control it yourself

import Collapse from 'react-collapsed';

class ControlledDemo extends React.Component {
  state = {
    isOpen: false
  };

  handleClick = () => this.setState(({isOpen}) => ({isOpen: !isOpen}));

  render() {
    return (
      <Collapse isOpen={this.state.isOpen}>
        {({getCollapseProps, getTogglerProps}) => (
          <React.Fragment>
            <button {...getTogglerProps({onClick: this.handleClick})}>
              Toggle Collapse
            </button>
            <div {...getCollapseProps()}>
              {this.state.isOpen ? `I'm visible!` : `You can't see me!`}
            </div>
          </React.Fragment>
        )}
      </Collapse>
    );
  }
}

API

Prop	Type	Default	Description
children	func		Render prop to create the Collapse UI
isOpen	bool	`null`	If true, the Collapse is expanded
defaultOpen	bool	`false`	If true, the Collapse will be expanded on mount
duration	number \| object	`500`	Length of animation (in MS)
easing	number \| object	`cubic-bezier(0.250, 0.460, 0.450, 0.940)`	CSS timing function for animation
delay	number \| object	`0`	Animation delay (in MS)

Acknowledgments

Received lots of inspiration for implementation from react-show. If you need a more generalized API for CSS animations, check it out!