Write Transitions with React Transition Group using JSS
In React Transition Group, it’s possible to use JSS to write transitions. In this lesson, we’re going to write a transition using JSS to find out how it differs from writing standard CSS or inline styles.
Instructor: [00:00] In this example, we have a menu button which toggles the appearance of a menu when clicked. The menu is transitioned in and out of the DOM using CSS transition from React Transition Group. This example is using vanilla-css. Let's say we need to use JSS instead.
[00:22] We can use JSS with React Transition Group. What we're going to do is refactor this example to be using React's JSS instead of standard CSS. We're going to start by making a new file inside the directory. This is going to be our styles.js. We're going to turn all of our CSS into JavaScript objects.
[00:47] Now, we have a populated styles.js with all of the styles in JavaScript which we can use for JSS. Let's head back over to our component. We can remove the CSS import. We'll replace it with styles.js. We're going to need to import inject sheet from react-jss.
[01:08] Let's head towards the bottom of our app where we'll need to slightly change our export to account for using inject sheet with our styles. We're going to make a styled app which uses inject sheet to join styles and app. That's what's going to get exported.
[01:31] Now, we need to turn our class name references into JSS friendly references. Using inject sheet gives us a classes prop. I'm going to use this to refer to the styles in styles.js. After refactoring all of our class name references to link to our styles.js, we can now see that we have the same styles. However, there's no transition added yet.
[02:02] This is because we need to change how this CSS transition component is set up. What we need to do is change this class names prop.
[02:11] If we're using standard CSS, it is fine to pause a string is this prop. The React Transition Group class names such as enter and enter-active will always stem from this string. However, in JSS, it's a bit different, because our class names need to refer to classes.
[02:30] This class names prop in CSS transition is ideal for using with JSS, because we can also pass an object as the prop. Instead of passing a string of Boolean, we're going to pass an object with enter, enter-active, exit, and exit-active keys. I'm going to refer to JSS class names.
[02:56] The difference here is that we need to be explicit about the class names that we need. This class names prop can either be a string or an object. The reason is class names as supposed to class name is that we can supply multiply class names.
[03:12] If you only pass a string, it will generate multiple class names. If we look in our styles.js, we can see that we have this transition selector set up. Now, let's save and refresh. There's our transition working with JSS.