react-leanimate
v0.16.0
Published
a lightweight library to animate react components
Downloads
39
Maintainers
Readme
react-leanimate
Animate your react application with lightweight components.
Checkout the demo page which is worth more than a thousand words.
Aminate component
The problem with animating a react component is simple, you cannot animate a component that has been removed from the DOM.
The solution is to wrap a component, intercept the unmount lifecycle, clone the underlying DOM node and then apply the desired CSS animation.
Here is a basic example of how to use the Animate component:
import React, { Component } from "react";
import Animate from "react-leanimate/Animate";
class Toggler extends Component {
state = {
show: true
};
render() {
const { state } = this;
return (
<div>
<button onClick={() => this.setState({ show: !state.show })}>
Toggle
</button>
<div
>
{state.show && (
<Animate
component={<span>Hello World</span>}
animationHide={"hide-right 1s"}
animationShow={"show-left 1s"}
/>
)}
</div>
</div>
);
}
}
Smooth component
When a child component is added or removed, the parent node will have its width or height changed. Use the Smooth component to animate this transition.
Example:
import React, { Component } from "react";
import Smooth from "react-leanimate/Smooth";
class ShowDetails extends Component {
state = {
show: false
};
render() {
const { state } = this;
return (
<Smooth className="box-border">
<button onClick={() => this.setState({ show: !state.show })}>
Show Details
</button>
<div>
{state.show && <div>Details here</div>}
</div>
</Smooth>
);
}
}
Installing this library
The library is published under the react-leanimate name
$ npm i react-leanimate
Building this library
microbundle is the underlying tool to produce size efficient bundles.
$ npm run build:lib
> microbundle -i src/Animate.js -i src/Smooth.js --external all --jsx React.createElement
Build output to dist:
609 B: Animate.js
575 B: Animate.m.js
673 B: Animate.umd.js
718 B: Smooth.js
684 B: Smooth.m.js
782 B: Smooth.umd.js
Modifying this library
Start a development server using:
$ npm run build
You can also develop with storybook
$ npm run storybook