Collapsible react component

Collapses and expands content with an animation.

Try interactive demo.

Install

npm install collapsible-react-component

Usage

import React from 'react'

import { Collapsible } from 'collapsible-react-component'
import 'collapsible-react-component/dist/index.css'

const Example = () => {
  const [open, setOpen] = React.useState(true)

  return (
    <>
      <button
        type='button'
        onClick={() => {
          setOpen(!open)
        }}
      >
        {open ? 'Close' : 'Open'}
      </button>
      <Collapsible
        open={open}
        onTransitionStart={(open) => {
          console.log('Collapsible box used to be', open ? 'open' : 'closed')
        }}
        onTransitionEnd={(open) => {
          console.log('Collapsible box is now', open ? 'open' : 'closed')
        }}
        revealType='bottomFirst'
      >
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio, sed
        labore? Autem laboriosam minima corrupti rem repellat odio reiciendis
        nihil! Eum natus dolorem atque blanditiis ipsam aperiam. Voluptatem,
        exercitationem fugit.
      </Collapsible>
    </>
  )
}

Props

Name	Required	Default	Type	Description
open	✅	none	boolean	Determines wheter the children content should be visible.
children	✅	none	ReactNode	Collapsible content.
onTransitionStart		noop	(open: boolean) => void	Callback invoked when transition starts. open is the starting state.
onTransitionEnd		noop	(open: boolean) => void	Callback after content is fully expanded or fully closed. open is the final state.
revealType		bottomFirst	bottomFirst | topFirst	Type of transition animation.

Development

Run

npm ci
npm run dev

and

cd example
npm ci
npm run dev