collapsible-react-component
TypeScript icon, indicating that this package has built-in type declarations

2.0.2 • Public • Published

Collapsible react component

Collapses and expands content with an animation.

NPM npm type definitions

screencast

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

Package Sidebar

Install

npm i collapsible-react-component

Weekly Downloads

262

Version

2.0.2

License

MIT

Unpacked Size

18.3 kB

Total Files

14

Last publish

Collaborators

  • onset