collapsible-react-component

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}>
        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>
    </>
  )
}

Development

Run

npm ci
npm run dev

and

cd example
npm ci
npm run dev