Skip to content

unirakun/hoc-react-animate

Repository files navigation

hoc-react-animate

what is this?

This is a higher order component ("HOC") that adds a CSS class to its child component whenever a prop change or at mount (or both) to animate it.

try it

You can test some examples here.

install

npm i --save hoc-react-animate

use

You have to wrap your component, and give some informations:

Parameter Required Default value Description
watchedProps no [] The props to watch (they are compared with lodash.isEqual)
timeout no 1000 The time (in ms) for which the CSS class is applied to the wrapped component
className no 'animate' The class to add when a prop changes (or at mount)
atMount no false Set to true if you want to animate the component at mount

Component.js

import React, { PropTypes } from 'react'
import animate from 'hoc-react-animate'

const Component = ({ className, text }) => {
  return (
    <div
      className={`component ${className}`}
    >
      {text}
    </div>
  )
}

Component.propTypes = {
  className: PropTypes.string,
  text: PropTypes.string,
}

export default animate(
  Component,
  {
    watchedProps: ['text'],
    timeout: 200,
  }
)

css

.component {
  transition: all .2s;
}
.component.animate {
  transform: scale(2);
}

About uni rakun

uni rakun is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL Fabien JUIF

Releases

No releases published

Packages

No packages published