Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Use React Transition Group alongside the Styled Components library

    Rory SmithRory Smith
    reactReact
    ^16.0.0

    It’s possible to use React Transition Group alongside Styled Components. This can be useful should you want to use <CSSTransition> but are also taking advantage of the Styled Components library. In this lesson, we are going to take a look at the styled-transition-group library in order to achieve this.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: In this example, we have a menu button which, when clicked, toggles the appearance of a menu using a transition with CSSTransition from react-transition-group. This example uses vanilla CSS to achieve the transition.

    Let's say instead we want to use styled-components to achieve the same thing. We will refactor our index.js and our index.css to use styled-components.

    First, we'll create a new file called "components.js." We'll grab all our CSS. We'll place it inside components.js. Now let's import styled from styled-components. What we need to do is turn these CSS blocks into styled-components.

    Here's an example with the toggler, which is a button. It becomes a Toggler component, which is a styled button. We pass it a template string. Let's apply the same principle to the rest of the CSS in this file.

    Now we have a Container component that contains our variables, the Toggler component, which accounts for the active state using props instead of a modifier class name, which is what we had before, and the List and ListItem components.

    In order to refactor our transition CSS, i.e., these four blocks, we need to make use of a separate package, styled-transition-group. Let's import that now.

    We'll import transition from styled-transition-group. This is going to allow us to use styled-components alongside react-transition-group.

    Now we can refactor our transition CSS. Now we have a Menu component with the styles as before. We're using a transition.div. The selectors here are slightly different to account for the library.

    Our styled-components are set up now. Let's head over back to our index.js, where we'll need to do some refactoring to account for styled-components. We're no longer going to need the imports to CSSTransition, class names, or index.css.

    Instead, we're going to import the styled-components that we just wrote. Down in our render, we're going to replace class names and elements with their corresponding styled-components names.

    < div className="container"> becomes Container. Let's apply that to the rest of the render method now. Now let's save and refresh. Now our example is working with styled-components.