Introduction
I came across a really cool and useful hover effect on Colors & Fonts that allows you to compare font pairings with different colors:
This interaction inspired me to tackle my own version in React and share it with the community. In this tutorial you will use the useState
React Hook and Emotion to create the following:
Here's a 9-minute, step-by-step video below that you can watch if you'd prefer to follow along that way. If you enjoy it, be sure to subscribe! Otherwise, each step is outlined below the video. Let's dive in!
Get Started
Skip Building the Card Component
The main focus of this tutorial is about how to change state with React Hooks and mouse events, so to save you some time I went ahead and created a Codesandbox project that you can fork with the basic Card component completed.
Let's Talk About Emotion(s)
In this tutorial we'll be using Emotion, a CSS in JS framework. If you've never heard of a CSS in JS framework, there's a couple of key benefits, including:
- Add, change and delete CSS without any unexpected consequences and avoid dead code.
- Never go on a hunt for CSS affecting your components ever again.
- Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.
- Send only the critical CSS to the user for a rapid first paint.
- Simply style your components with a global theme or based on different states.
The last benefit in the above list is what we're going to focus on today because we're going to use the state from our useState
React Hooks to dynamically change the colors of the fonts and background.
So that's the intro, let's get to coding!
Create State Using the useState
React Hook
We first need to import useState
from React at the top of the Card component. After it's imported we'll use array destructuring to create the state variable and the function to update the state. You can name these two values anything you want, but a good practice is to give your state variable a descriptive name like background
and follow the function naming convention with set
+ variable name
–so setBackground
in this case.
Next we declare useState()
, passing a default value in parenthesis. The default value for background
will be a hex code for the background color, which is an off-white value of #fdfdfd
.
We also need to create a state value and function for the font color, so create another instance of useState
with a state variable of font
and a function of setFont
. The default value for this state variable is the following hex code: #424246
.
Now with state values initiated in our component we can pass them into the CSS, replacing the hex code values with the default state values. We're not covering much of Emotion in this tutorial, but do take note that I'm storing the CSS in constants and passing the constants into the className
below. You could pass the CSS directly into the className
, but breaking them into constants makes it a little easier to grok.
By now the Card component should look like this:
Note in the above code that I used div
tags for the 3 buttons instead of button
tags like I did in the video.
Create a Method to Handle the State Functions
Right below where we declared the state values and functions, create a new arrow function called setStyle
that takes two parameters: background
and font
. These parameters will be hex code string values that we will pass into our state functions as arguments in order to update the state.
In order to update the state we need to call the two state functions, passing the background
parameter into the setBackground
function and the font
parameter into the setFont
function.
Your new setStyle
method should look like this:
Add onMouseEnter
and onMouseOut
Events to the Buttons
Let's bring this all together by writing onMouseEnter
and onMouseOut
events in each button, passing in the hex code values we want to set. Also note that it's important to write these as arrow functions or the code will execute when the component in rendered.
And that's it! Now your Card component should look like this:
Continue Learning
If you made it this far, thank you! You can keep up with all my content by subscribing to the Skillthrive Youtube channel. I have a number of courses on there that you can start watching for free, including a 3.5 hour course on how to build a blog from scratch using React, Gatsby, and Contentful.
Top comments (0)