Collapsible react component

Collapses and expands content with an animation.

Install

npm install collapsible-react-component

Usage

Try CodeSandbox interactive demo or see Storybook examples.

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

const Example = () => {
	const [open, setOpen] = 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 | ✅ | | boolean | Determines whether the children content should be visible. | | children | ✅ | | 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. | | alwaysKeepChildrenMounted | | false | boolean | If true then children won't be unmounted when collapsed. |

Development

Run

npm ci
npm run dev

and

npm run storybook