import React from 'react';
import ReactDOM from 'react-dom';
import {Motion, spring} from 'react-motion';
import {colorInterpolation} from 'color-interpolator';
 
const SlideColor = props => {
  // Since it is not possible to use spring over a color, a parameter is used
  const defaultStyle = {
    t: 0
  };
  const endStyle = {
    t: spring(1)
  };
  return (
    <Motion defaultStyle={defaultStyle} style={endStyle}>
      {style => {
          // Here the parameter is used as an interpolation parameter
          const color = colorInterpolation(props.origin, props.end, style.t);
          console.log(style.t);
          return (
          <div style={Object.assign({}, props.style, {color: color})}>
            {props.children}
          </div>);
        }
      }
    </Motion>
  );
};
 
ReactDOM.render(
  (<div>
    <SlideColor origin='#AAff00' end='#ff00AA'>
      <p> Hello slide color </p>
    </SlideColor>
  </div>),
  document.getElementById('app')
);