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