Passing State to a CSS Variable

[00:00:00]
>> Matias Gonzalez: So then we can just pass this finally into my CSS as a variable and then just use that to make the fonts React to our mouse movement. So let's create maybe a state for that, so const. It's called the distance value, set distance value, and just use state. Let's just initialize it at 0, and then every time I move the mouse, let's actually set this value.

[00:00:48]
And then we can go ahead and grab this value and pass it down to CSS using a variable, so style. Let's call it distance and let's connect it with our value. So I'm going to make React happy by React CSS properties. So now we can access this variable right here. Let's go into my styles and instead of having like a hardcoded value here, let's access the variable, so var distance.

[00:01:35]
Now this is not going to do anything because this is going from 0 to 1 and our font weight goes from 100 to 900, so we need to remap this value. So as we saw before, we can do calculations with variables, so let's do that. Let's calc. So when I always wanted it to be at least 100%, so let's add that.

[00:02:08]
And then as this value approaches 1, I want it to be the sum of this, I want it to be 900%, so I want to multiply it. So what's happening here is that when distance is going to be zero, this value is going to be 100%, when distance is 1, this is going to get into 800%, and the sum of these will be 900%, so that's usually how we can easily remap a value if we have like a normalized value already.

[00:02:45]
So if I go ahead and move my mouse, I can see that the font weight is reacting to that. I think I like it better like the other way around, so I'm going to go ahead and do 1 minus the distance. So yeah, as I get closer it will be bolder and then it will get thinner. And then I can also do the same for the letter spacing, for example.

[00:03:26]
I can do, and okay, I want the letter spacing to grow as we get away, so I can say distance times 0.03, for example, so I will multiply my number by this right here. Notice how I had to add the unit, so if I do this it's not going to work because there's no ems involved in this thing.

[00:03:56]
So sometimes you just want to do like times 1 em just to add the number. That happened to me sometimes, it's like hey, I need, I already have this calculation done and I want to transform into viewport widths or percentage or ems or whatever, so I can just multiply it by whatever units I need.

[00:04:24]
So why is it not working? Maybe it's too small. Yeah, okay. So as we can see, this is going to react to our mouse.