React Fluid Container for Typescript
Fork of react-fluid-container
Graceful dynamic/variable height animation.
This fork works with React 16 and contains Typescript typings in case you needed one. It works only as a module, though let's face it - who doesn't use bundlers these days 😉
Install
npm install react-fluid-container-typescript --save
{ superprops thisstate = showPanel: false } { const showPanel = thisstate return <div className="accordion"> <div onClick= this className="accordion-title" > Toggle accordion </div> <FluidContainer height=showPanel ? 'auto' : 0 className="accordion-panel" > <div>Auto height animation!</div> </FluidContainer> </div> }
Props
tag
: string
The wrapping element around your only child
element. Defaults to div
. Any other valid props like className
will be passed to this element.
height
: 'auto' | number
The height value you want to animate to. Defaults to auto
.
rmConfig
: { val: number; stiffness: number; damping: number; precision: number; }
Pass in any valid React Motion config object.
children
: React.ReactNode
Only one child is allowed and is what the measurements will be based off of. This should be considered a pretty "dumb" element that is just a wrapper to measure off of. Make sure there are no margins are "hanging" outside of your elements. You can use 1px padding to avoid this.
beforeAnimation
: (currentHeight: number, nextHeight: number) => void;
Callback before animation has started. Passes in previous and next heights.
afterAnimation
: () => void
Callback after animation has completed.