Graceful dynamic/variable height animation.
npm install react-fluid-container --save
<script src="https://unpkg.com/react-fluid-container/dist/react-fluid-container.js"></script>
(UMD library exposed as `ReactFluidContainer`)
import FluidContainer from 'react-fluid-container'
class App extends Component {
constructor() {
super(props)
this.state = {
showPanel: false
}
}
render() {
const { showPanel } = this.state
return (
<div className="accordion">
<div
onClick={() => this.setState({ showPanel: !showPanel })}
className="accordion-title"
>
Toggle accordion
</div>
<FluidContainer
height={showPanel ? 'auto' : 0}
className="accordion-panel"
>
<div>Auto height animation!</div>
</FluidContainer>
</div>
)
}
}
The wrapping element around your only child
element. Defaults to div
. Any other valid props like className
will be passed to this element.
The height value you want to animate to. Defaults to auto
.
Pass in any valid React Motion config object.
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.
Callback before animation has started. Passes in previous and next heights.
Callback after animation has completed.
clone repo
git clone [email protected]:souporserious/react-fluid-container.git
move into folder
cd ~/react-fluid-container
install dependencies
npm install
run dev mode
npm run dev
open your browser and visit: http://localhost:8080/