Package Exports

@kunukn/react-collapse

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 (@kunukn/react-collapse) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-collapse

Collapse component with css transition for elements with variable and dynamic height.

Demo

CSS required

⚠️ ️You need to specify the transition property or add a class selector with style (transition) in your own stylesheet to add animation. You can copy the smashing example below

.collapse-css-transition {
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

Installation

npm i -S @kunukn/react-collapse

yarn add @kunukn/react-collapse

import Collapse from '@kunukn/react-collapse';
// or with require syntax
const Collapse = require('@kunukn/react-collapse').default;

<Collapse isOpen={true || false}>
  <div>Random content</div>
</Collapse>;

Properties

`isOpen`: PropTypes.boolean

Expands or collapses content.

`children`: PropTypes.node or `render`: PropTypes.func

One or multiple children with static, variable or dynamic height.

<Collapse isOpen>
  <p>Paragraph of text</p>
  <p>Another paragraph is also OK</p>
  <p>Images and any other content are ok too</p>
  <img src="cutecat.gif" />
</Collapse>

<Collapse
  isOpen
  render={collapse => (
    <>
      <p>this is the collapse state: {collapse}</p>
      <p>Another paragraph is also OK</p>
      <p>Images and any other content are ok too</p>
      <img src="cutecat.gif" />
    </>
  )}
/>

`className`: PropType.string

You can specify a className with your desired style and animation. By default kn-react-collapse will be added to the component.

`transition`: PropType.string

You can also specify a CSS transition in line by using the transition prop.

<Collapse transition="max-height 300ms cubic-bezier(.4, 0, .2, 1)">
  <p>Paragraph of text</p>
</Collapse>

`onChange = collapseState => { /* your implementation */ }`: PropTypes.func

Callback function for when your transition on max-height (specified in className) is started or finished. It can be used to trigger any function after transition is done. A collapse state is provided to your callback function.

ARIA and data attributes

Collapse transfers aria- and data- attributes to the component's rendered DOM element. For example this can be used to set the aria-hidden attribute:

<Collapse isOpen={isOpenState} aria-hidden={isOpenState ? 'false' : 'true'}>
  <p>Paragraph of text</p>
</Collapse>

Development and testing

To run example covering all features, use npm run storybook or yarn storybook.

git clone [repo]
cd [repo]
npm i
npm start
open http://localhost:6007

or with yarn

git clone [repo]
cd [repo]
yarn
yarn start
open http://localhost:6007

CDN

https://unpkg.com/@kunukn/react-collapse/

<link rel="stylesheet" href="https://unpkg.com/@kunukn/react-collapse@0.0.5/dist/Collapse.css" />
<script src="https://unpkg.com/@kunukn/react-collapse"></script>

<script>
  var Collapse = window.Collapse.default;
</script>

Heavily inspired from

https://github.com/SparebankenVest/react-css-collapse 🎆

@kunukn/react-collapse