react-collapsed (useCollapse)

A custom hook for creating accessible expand/collapse components in React. Animates the height using CSS transitions from 0 to auto.

Features

• Handles the height of animations of your elements, auto included!
• You control the UI - useCollapse provides the necessary props, you control the styles and the elements.
• Accessible out of the box - no need to worry if your collapse/expand component is accessible, since this takes care of it for you!
• No animation framework required! Simply powered by CSS animations
• Written in TypeScript

Demo

See the demo site!

CodeSandbox demo

Installation

1$ yarn add react-collapsed
2# or
3$ npm i react-collapsed

Usage

Simple Usage

1import React from 'react'
2import useCollapse from 'react-collapsed'
3
4function Demo() {
5  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse()
6
7  return (
8    <div>
9      <button {...getToggleProps()}>
10        {isExpanded ? 'Collapse' : 'Expand'}
11      </button>
12      <section {...getCollapseProps()}>Collapsed content 🙈</section>
13    </div>
14  )
15}

Control it yourself

1import React, { useState } from 'react'
2import useCollapse from 'react-collapsed'
3
4function Demo() {
5  const [isExpanded, setExpanded] = useState(false)
6  const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded })
7
8  return (
9    <div>
10      <button
11        {...getToggleProps({
12          onClick: () => setExpanded((prevExpanded) => !prevExpanded),
13        })}
14      >
15        {isExpanded ? 'Collapse' : 'Expand'}
16      </button>
17      <section {...getCollapseProps()}>Collapsed content 🙈</section>
18    </div>
19  )
20}

API

1const { getCollapseProps, getToggleProps, isExpanded, setExpanded } =
2  useCollapse({
3    isExpanded: boolean,
4    defaultExpanded: boolean,
5    expandStyles: {},
6    collapseStyles: {},
7    collapsedHeight: 0,
8    easing: string,
9    duration: number,
10    onCollapseStart: func,
11    onCollapseEnd: func,
12    onExpandStart: func,
13    onExpandEnd: func,
14  })

useCollapse Config

The following are optional properties passed into useCollapse({ }):

What you get

Alternative Solutions

• react-spring - JavaScript animation based library that can potentially have smoother animations. Requires a bit more work to create an accessible collapse component.
• react-animate-height - Another library that uses CSS transitions to animate to any height. It provides components, not a hook.

FAQ

1// from
2<div {...getCollapseProps({style: {padding: 20}})}
3  This will do weird things
4</div>
5
6// to
7<div {...getCollapseProps()}
8  <div style={{padding: 20}}>
9    Much better!
10  </div>
11</div>