collapsible-react-component v3.0.6

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

Development

Run

npm ci
npm run dev

and

cd example
npm ci
npm run dev