Helper class for animating properties in React

Transition.jsx

import now from 'performance-now';
import raf from 'raf';
import { Component, PropTypes } from 'react';

export default class Transition extends Component {
  static propTypes = {
    active: PropTypes.bool.isRequired,
    children: PropTypes.func.isRequired,
    duration: PropTypes.number.isRequired,
    fromValue: PropTypes.number.isRequired,
    interpolator: PropTypes.func.isRequired,
    repeat: PropTypes.bool.isRequired,
    toValue: PropTypes.number.isRequired
  };

  static defaultProps = {
    active: false,
    duration: 1000,
    fromValue: 0,
    interpolator: (value) => value,
    repeat: false,
    toValue: 1
  };

  constructor (props, context) {
    super(props, context);

    this._timeTotal = 0;

    this.state = {
      currentValue: props.fromValue
    };
  }

  componentDidMount () {
    const { active } = this.props;

    if (active) {
      this.startAnimation();
    }
  }

  componentDidUpdate (prevProps, prevState) {
    const { active, duration, repeat } = this.props;

    if (active) {
      if (duration > this._timeTotal) {
        this.startAnimation();
      } else if (repeat) {
        this._timeTotal = 0;
        this.startAnimation();
      }
    }
  }

  componentWillUpdate (nextProps, nextState) {
    const { active } = this.props;

    if (active !== nextProps.active) {
      if (nextProps.active) {
        this.startAnimation();
      } else {
        this.cancelAnimation();
      }
    }
  }

  render () {
    const { children } = this.props;
    const { currentValue } = this.state;

    return children(currentValue);
  }

  cancelAnimation () {
    raf.cancel(this._afid);
  }

  startAnimation () {
    this._timeNow = now();
    this._afid = raf(() => {
      const { duration, fromValue, interpolator, toValue } = this.props;

      this._timeTotal += now() - this._timeNow;

      const delta = Math.max(1, duration / this._timeTotal);
      const interpolated = interpolator(delta);
      const currentValue = (toValue - fromValue) / interpolated;

      this.setState({ currentValue });
    });
  }
}

// Example usage:
<Transition
  active
  duration={5000}
  fromValue={0}
  toValue={1}
>
  {(currentValue) => (
    <div style={{ opacity: currentValue }}>
      Component
    </div>
  )}
</Transition>