react-collapse

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

Demo

• simple - codepen
• accordion - codepen
• read more - codepen
• codesandbox
• codesandbox expand-all
• view storybook

CSS required

⚠️ ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  .collapse-css-transition {
    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>

Alternatively you can add it using the transition prop.

Installation for React 16.3+

(UMD minified 5.2kb, gzipped 1.9kb)

npm i @kunukn/react-collapse@^1

or

yarn add @kunukn/react-collapse@^1

Installation for React 16.8+

(UMD minified 3.6kb, gzipped 1.6kb)

npm i -S @kunukn/react-collapse
or
yarn add @kunukn/react-collapse

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

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

Properties

isOpen: PropTypes.boolean

Expands or collapses content.

children: PropTypes.node

render: PropTypes.func

Renders content

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

<Collapse isOpen={true || false}>
  <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>

or

<Collapse
  isOpen={ true || false }
  render={collapseState => (
    <div className="using-collapse-state-to-add-css-class " + collapseState>
      <p>I know the collapse state: {collapseState}</p>
      <p>Another paragraph is also OK</p>
      <p>Images and any other content are ok too</p>
      <img src="cutecat.gif" />
    </div>
  )}
/>

There are four possible collapse states: collapsed, collapsing, expanded, expanding.

className: PropType.string

You can specify a custom className. The default value is collapse-css-transition.

excludeStateCSS: PropType.boolean

Exclude the applied CSS collapse state. By default one of the class names are applied:

• -c-is--collapsed
• -c-is--collapsing
• -c-is--expanded
• -c-is--expanding

transition: PropType.string

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

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

elementType: PropType.string

You can specify the HTML element type for the collapse component. By default the element type is a div element.

<Collapse elementType="article">
  <p>Paragraph of text inside an article element</p>
</Collapse>

collapseHeight: PropType.string

You can specify the collapse height in CSS unit to partially show some content.

<Collapse collapseHeight="50px">
  <p>A long paragraph of text inside an article element</p>
</Collapse>

onChange : PropTypes.func

Callback function for when the transition changes.

let myCallback = ({ collapseState, isMoving, hasReversed, collapseStyle }) => {
  /* your implementation */
};

<Collapse onChange={myCallback} isOpen={true || false}>
  <p>A long paragraph of text inside an article element</p>
</Collapse>;

onInit : PropTypes.func

Similar to onChange but only invoked on mount.

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 aria-hidden={isOpenState ? "false" : "true"} isOpen={isOpenState}>
  <p>Paragraph of text</p>
</Collapse>

Development and testing

To run development

npm start or yarn start

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

or with yarn

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

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

• To develop and play around: yarn start
• To build the bundle: yarn build
• To validate the bundle: yarn validate

CDN

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

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

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

Supported browsers

IE11 + Modern browsers

Supported React versions

• React version 16.3+ : use Collapse version 1
• React version 16.8+ : use Collapse version 2+

Used React 16.3 life-cycles

• render // uses the style states to invoke CSS transition
• componentDidMount // initial expanded or collapsed state
• getDerivedStateFromProps // detect if isOpen props has changed and apply a new collapse state
• componentDidUpdate // update style states from the four possible collapse states

Used React 16.8 life-cycles

• render
• useState
• useEffect

Design goals

• let the browser handle the animation using CSS height transition
• minimal in file size
• minimalistic API - only have a Collapse component which updates on isOpen props
• flexible - provide your own markup, styling and easing
• interruptible - can be reversed during movement
• inert - when collapsed you should tab over the collapsed component
• availability - from cdn or npm install
• Collapsible on height only

This was created with heavy inspiration from

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