reactjscss-animationsanimate.cssstyled-components

Styled-components with animate.css


I use styled-components in my project. Now I would like to implement some simple animations like animate.css

Is that possible to use react-animations (or similar library) with styled-components ?

It's a waste of time to implements animations like in animate.css again. Additionally I don't want to install anothers package as Aphrodite because I have styled-components already.


Solution

  • I've found an answer with code:

    import React from 'react';
    import styled, { keyframes } from 'styled-components';
    import { fadeIn } from 'react-animations';
    
    const fader = keyframes`${fadeIn}`;
    
    // Create a <Title> react component that renders an <h1> which is
    // centered, palevioletred and sized at 1.5em
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
      animation: 1s ${fader} alternate infinite;
    `;
    
    // Create a <Wrapper> react component that renders a <section> with
    // some padding and a papayawhip background
    const Wrapper = styled.section`
      padding: 4em;
      background: papayawhip;
    `;
    
    
    export default () => {
      // Render these styled components like normal react components. They will pass on all props and work
      // like normal react components – except they're styled!
      return (
        <Wrapper>
          <Title>Hello World, this is my first styled component!</Title>
        </Wrapper>
      );
    }