react-transition-collapse
Installation
npm install --save react-transition-collapse
yarn add react-transition-collapse
Usage
ReactTransitionCollapse takes these props:
children: Element
duration: number | string // number of milliseconds
expanded: boolean
animationType: 'scale' | 'translate' // which css transform should be applied to animate the transition
Full example
import React useState from 'react'import ReactTransitionCollapse from 'react-transition-collapse' const Expandable = const expanded setExpanded = return <> <button =>Expand</button> <div> <ReactTransitionCollapse = => Lorem nostrud velit ullamco dolore exercitation consectetur occaecat enim laboris cillum incididunt ullamco ex Adipisicing eu nulla anim laborum Exercitation consequat anim culpa aute fugiat dolor in aliqua Lorem labore mollit anim id dolore Sunt ut sunt duis commodo irure dolore adipisicing occaecat non nisi sit Labore consequat amet anim nulla ipsum excepteur do duis labore </ReactTransitionCollapse> </div> </>
NPM scripts
npm t
: Run test suitenpm start
: Runnpm run build
in watch modenpm run test:watch
: Run test suite in interactive watch modenpm run test:prod
: Run linting and generate coveragenpm run build
: Generate bundles and typings, create docsnpm run lint
: Lints codenpm run commit
: Commit using conventional commit style (husky will tell you to use it if you haven't 😉)