Working With Styled Components

If you're using styled components then you can use react-reveal to inject reveal functionality, enter and leave animations for transition groups or make carousels out of styled components.react-reveal has withReveal higher order function that can do just that.

// This example is live editable
import makeCarousel from 'react-reveal/makeCarousel';
import Fade from 'react-reveal/Fade';
import styled from 'styled-components';

class Example extends React.Component {
  render() {
    const Title = withReveal(styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;

    `, <Fade left/>);
    return (
      <Title>React Reveal</Title>
    );
  }
}