@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.