1.0.4 • Published 5 years ago
@robcc/with-animation v1.0.4
@robcc/with-animation
HOC that handles animation when mounting and unmounting a React component easily.
Installation
npm install @robcc/with-animation
Usage
withAnimation wraps your custom React component.
import React, { Component } from 'react';
import withAnimation from '@robcc/with-animation';
const Block = (
<div className="block">
{this.props.children}
</div>
);
export default withAnimation(NormalBlock);
The mount
property will specify if the component should be mount. Both onMount
and onUnmount
includes a CSS keyframe that will be executed when the component mounts or unmounts. Additional animations can be made on the component itself.
...
<button className="button" onClick={() => this.setState({ toggle: true });}>
Toggle Class
</button>
<Block mount={toggle} onMount="in" onUnmount="out" defaultClass="wrapper" animateOnLoad={false}>
Animated Block
</Block>
// App.css
@keyframes fadeIn {
0% {
opacity: 0;
left: -200px;
}
100% {
opacity: 1;
left: 0px;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
left: 0px;
}
100% {
opacity: 0;
left: 200px;
}
}
Example
Properties
prop | Description |
---|---|
mount | Defines whether the component should be mounted on render. It's true by default. |
onMount | Defines a keyframe to be executed when the component is mounted. |
onUnmount | Defines a keyframe to be executed when the component is unmounted. |
defaultClass | This sets default classes to the div created by the HOC that will be wrapping the component. |
animateOnLoad | Defines whether the onMount animation should be executed when the component is first rendered. It's true by default. |