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!
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.
- 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!
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
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
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:
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.
Right below where we declared the state values and functions, create a new arrow function called
setStyle that takes two parameters:
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
setStyle method should look like this:
Let's bring this all together by writing
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:
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.