All language subtitles for 006 Using ReactTransitionGroup_en

Let's have a look at react transition group you can simply google for it to find the github repository

of this package.

Now this package is not an official react package or not by the react team but it's a package created by the vibrant

react community and this is a package which allows you to smoothly animate elements when they

are added and removed to and from the dom.

Well let's check out the main documentation,

there you'll see how to install it and then it also describes how it works and how it's used,

feel free to dive deeper into this to really see all possible use cases and what else you can do with

that

but of course, I'll also show you how we may use it together over the next lectures.

First of all let's install it with this

npm install react transition group save command,

I copy that, I'll quit my npm start process,

paste this in and simply run it to now install and store this package in this project here

and of course you add it like this to any react project,

thereafter we can restart npm start.

And now let's start very simple and see this in action, for this I'll not even start with the modal

for now but we'll also soon animate this again but I'll add a button here and that button should

simply show or hide a nice little block, a div with a background color.

So there I'll say toggle and below that toggle I want to render a div,

now first of all let me simply add showBlock here in the state and initially that is false, let's say

and then here, below the button I'll check this.state.showBlock if it is true I'll add a div here

if it is false

I'll render null, like this.

Now this div will receive some inline style here with double curly braces to basically pass a javascript

object and in the javascript object,

I'll set the background color to red and additionally I'll set the width to 100 which will be interpreted

as pixels and the height to 100.

Now with that, let's hook up this button and on a click on this button, I'll actually simply execute a

method here, in this method I'll execute this.setState in the function version where I get the previous

state and then simply return a javascript object where showBlock is set to not previous state

showBlock like that.

So now I'm just basically just toggling between the display of the block,

if you click this button here, we do instead see and hide that

and to make this a little bit less ugly, I'll

also add a line break below our button here,

should be a self-closing element though

so that now it sits above open modal, like that. Let's also quickly add margin auto to our div so that it

is centered and let's give our button this button class name here to also improve its styling a little

bit.

Now with all of that if we save this, we get our toggle button toggling this red block,

now it might not have enhanced the look of our application but now we can use this block to start playing

around with the react transition package

we just installed. If we check out the documentation,

we see that this package exports one important component,

it actually exports more than that but we'll start with this one,

that transition component

now let me show you how this works.

First of all in my app.js file, I will import it

so I will import transition,

you can name this whatever you want,

it's a default export but I'll stick to transition from react transition group /transition

so that's a subpackage which gives us this transition component,

now we use this transition component to wrap what we want to animate,

in our case that's this div here. For that,

let me temporarily get rid of our check here whether we want to render this or not,

let's say we're always rendering this and instead let's add the transition component and wrap the div

with it like this.

That alone won't do much but we can now use this transition component to control the display of elements

inside of it and especially the animation of these elements.

We do this if we have a look at the documentation

by setting this in property, that's an important one. This decides whether the elements wrapped inside the

transition component should be shown or not

amd the transition component simply manages four internal states, entering, entered, exiting and exited which

we then again can listen to too to decide how our elements should be shown,

sounds very strange,

let me show you how it works.

So first of all, let's add this important in property to the transition component,

in determines whether the wrapped elements should be visible or not

so therefore for our div here, we should bind it to showBlock, only if showBlock is true

this div inside the transition component should be rendered.

We also got another important property we have to set on the transition component, timeout.

Now timeout simply is a time value which determines how long this animation should be played or to

be precise, since transition on its own doesn't play anything but just manages these four states I mentioned,

timeout simply determines how long it takes to switch from entering to entered and from exiting to exited

.

and it's this in-between thing

you can then animate.

So here, let's say timeout should be three hundred

and that will be interpreted as milliseconds.

Now with that what happens is that inside the transition component, we can render something dynamic with

curly braces because inside there, we now actually should render a function, that's what the transition

component then in the end gives us back, values we can use in a function or only one value to be precise,

the state.

So in the simplest form what we can do here, we can simply write an arrow function, that is why we need

the curly braces,

this arrow function should then of course return the jsx we actually want to render

and that could be a paragraph which outputs that state again wrapped in curly braces since we're

inside jsx code here again.

Now I'll temporarily cut the div here

to keep it in memory but remove it.

Now with that if we also fix the error I just saw, that in of course should be bound to this state

showBlock, showBlock properties are a state.

So now with that if we save this and we go back to our application, we see that we see exited there because

I am just outputting some text here with my paragraph where I output the state value which is given

to us by this transition component.

Let's see which other values this state value or argument can have, if I click toggle,

you'll see it first switched to entering and then to entered, if I click toggle again,

it's first exiting and then exited and if that's too fast, simply bump up the timeout to let's say 1 second

to have a little bit more time,

now if we click toggle, we see it's entering, entered, exiting, exited and that's all this transition

component does for you,

it manages this state argument it gives to you in a function you pass as a child of the transition component

and this managed state property takes your timing into account.

Now with that, we can of course go back to rendering a div in there but not actually in there like this

but instead in our function here,

so in this function where we get the state, I actually want to return a div and now we know that state

is entering, entered, exiting or exited, we can of course take advantage of this to now manipulate our

style depending on the state.

So for example here, we could say that we want to set the opacity of this element too

and if the state is let's say equal to exited, then the opacity should be zero,

otherwise it should be 1.

Now let's see this in action, if I save this,

now you see that the div is still there, it's taking up its space but it's not visible but toggle it, it's

shown again, if I click toggle again, it disappears after this one second, still we got no animation

right now

but we can see how we can use this transition component,

obviously it would be much nicer to have an animation though.

Now to add this animation, we just need to tweak this a little bit,

we simply have to add the transition property you already learned about and let's say you want to animate

any changes in the opacity property,

you could also use all

so let's go back to opacity though.

Let's say we want to animate this over one second using the same value as we use here in timeout,

1000 milliseconds and we want to do this with these out and all of that should be a string.

If we save this, now if I toggle this, you see it's animated in and animated out.

Now we got one important thing, we're controlling this animation with the transition,

it's still always staying in the dom though

but we can control this by adding more props to the transition component,

we can add mount on enter which simply is a boolean prop which says yeah

if the in property is set to true you should add the wrap element to the dom and on the other end, you can

add unmount on exit to really remove it from the dom

if that's not true. If we now save this, you see no empty space it's gone

but if we now click toggle it's there again, if we click toggle again,

it's removed.

Still no animation due to the way we're controlling this

we're only changing the opacity here when the state is exited, which is to late.

We set this to exiting instead which is entered right at the beginning, we click the toggle button

to remove it,

now you see it fades out.

So now we fixed the issue we had before

we still have an instant animation for showing it because we're not setting the style on that but for

removing it, we're taking advantage of these four different states or actually the two different states

for removing the element, exiting and exited.

And as soon as you start exiting, we already set the opacity to zero and we animate this

but it's not actually removed from the dom until the entire animation,

so this timeout here is over and now we really tell react to only remove this element after the given

period

with the help of this transition component. Now that was a lot of new knowledge,

let's apply this to our modal so that this hopefully becomes a bit clearer.