Tween animation for React components

function Example({ color, ...props }) {
  return (
    <Tween
      style={{ color }}
    >
      {style => (
        <div
          style={{ backgroundColor: style.color }}
        />
      )}
    </Tween>
  );
}

import { easeCubicInOut } from 'd3-ease';

function Example({ color, ...props }) {
  return (
    <Tween
      easing={easeCubicInOut}
      delay={1000}
      duration={500}
      style={{ color }}
    >
      {/* ... */}
    </Tween>
  );
}

function Example({ meetings, ...props }) {
  return (
    <Tween.TransitionGroup
      styles={meetings.map(meeting => ({
        key: meeting.id,
        style: {
          opacity: 1,
        },
        data: meeting,
      }))}
      willEnter={style => ({ ...style.style, opacity: 0 })}
      willLeave={style => ({ ...style.style, opacity: 0 })}
    >
      {styles => (
        <div>
          {styles.map(style => (
            <div
              key={style.key}
              style={{ opacity: style.style.opacity }}
            >
              {style.data.title}
            </div>
          ))}
        </div>
      )}
    </Tween.TransitionGroup>
  );
}

{
  key, // item id
  style: { ... }, // plain style object (same format as style for `Tween`)
  data, // item data
}

function Example({ color1, color2, invalidationCounter, ...props }) {
  return (
    <div {...props}>
      <Tween
        group={invalidationCounter}
        style={{ color: color1 }}
      >
        {/* ... */}
      </Tween>
      <Tween
        group={invalidationCounter}
        style={{ color: color2 }}
      >
        {/* ... */}
      </Tween>
    </div>
  );
}