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

    Fine-tune Transitions with React Transition Group’s Lifecycle Props

    Rory SmithRory Smith
    reactReact
    ^16.0.0

    In React Transition Group, there are six ‘lifecycle’ props at our disposal: onEnter, onEntering, onEntered; onExit, onExiting, and onExited. In this lesson, let’s take a look at how we can fine-tune our transition’s behaviour by using these props, in situations where we may want certain events to occur during or after a transition.

    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 front of us, we have a menu button which opens a menu using a transition with the CSS transition component from ReactTransitionGroup. Using CSS transition, we have access to a series of lifecycle props. These props can be used to target particular times during the transition phases. Let's demonstrate this.

    Let's write out all of the lifecycle props that we have available to us. We have onEnter, onEntering, onEntered, onExit, onExiting, and onExited. We're just going to fire a console log for each of these lifecycle props, so that we can see when they fire.

    Let's save, refresh, and open the console. When the menu opens, we get logs for the phase of entering and the same for leaving. Let's use these lifecycle props for something practical in our app.

    Let's say that when the menu opens, our profile link is going to turn green to grab the user's attention. We'll add onEntered and we fire a method which we haven't written yet called ToggleHighlightedMenuItem, which will also fire onExit.

    Above our render method, we'll write the method which is going to set some state, and it's just going to toggle a Boolean value called HighlightedMenuItem, which we're going to initialize to false.

    Now we need to apply a class name tied to this state for value. Let's head back down to our render. We can make use of the class names package to conditionally apply an active class name depending on the state. When HighlightedMenuItem is true, we're going to get this active variant of list item.

    We just need to write some styles for the active list item. Let's say when it's active, the color is going to turn green, and it's going to take 250 milliseconds to do so. Let's save now and see how that affects our menu. When it opens, we see the profile link turn green and it goes back onExit.