collapsible-react-component v2.0.2

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

Development

Run

npm ci
npm run dev

and

cd example
npm ci
npm run dev