Enhance Your React Components ✨ /w a Glossy Shine Effect
Tags: react, codepen, css, tutorial
Published: 2023-09-08 08:29:39

<figure>
  <figcaption>Cover Photo by <a href="https://unsplash.com/@snapsbyclark?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Clark Van Der Beken</a> on <a href="https://unsplash.com/photos/Tk0B3Dfkf_4?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </figcaption>
</figure>

Have you ever come across something on those stunning websites where elements seem to shimmer and shine as you hover over them? Well, you're in luck because in this quick tutorial, I am going to show you how to create a cool gloss effect using a custom React hook called `useGlossEffect`.

But first, let's give credit where it's due. We were inspired to create this React version of the awesome gloss effect created by Tahazsh on CodePen. You can check out the original pen right here: [Tahazsh's CodePen](https://codepen.io/tahazsh/pen/wvQwqYv).

Let's start with a demo:

{% codepen https://codepen.io/mike-at-redspace/pen/NWEaOJe %}

***

## Styling the Gloss Effect

We'll start by defining the appearance of our gloss using CSS. We'll create a class called `.gloss` that specifies the gloss's opacity, size, position, and that beautiful radial gradient background.

![css code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i77kuqwxg76e3knmqly.png)

***

## Crafting the `useGlossEffect` Hook

The heart of our gloss effect is the `useGlossEffect` hook. This hook takes three references as arguments: `cardRef`, `cardContentRef`, and `glossRef`. These references point to the card element, card content, and gloss element, respectively.

Inside the hook, we have three key functions:

### 🌟 `addShineClass()`
This function adds the gloss--shine class to our gloss element. This class triggers the transition and makes the gloss shine when we hover over it.

![addShineClass code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sofas9xml4nzjobo68mk.png)

***

### 🗺️ `mapNumberRange()`

At the heart of the `mapNumberRange` function lies a fundamental mathematical concept known as linear interpolation. Linear interpolation is a technique used to estimate values within a given range based on known values at two endpoints. In our case, we leverage this technique to map a value from one range to another.


![mapNumberRange code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lhzg5hiur5j1mqel7xr.png)

***

### 🧮 `calculateTransformValues()`
In this function, we calculate various values needed for the gloss effect, including rotation degree, translation, and opacity. We use the mouse pointer's position and the card's dimensions to determine how the gloss should behave. Kudos to Tahazsh's for the math here.

![calculateTransformValues code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xfw76u4rqo3ty8kwfnw.png)

***

### ✨ `applyTransform()`
Here, we apply the calculated transforms and opacity to our card content and gloss elements, creating that mesmerizing effect. It uses the values calculated in the previous step.

![applyTransform code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lky7irpj3kx7749anpvx.png)

***

## Bringing It All Together

To complete our gloss effect, we wrap it up within a `useEffect` block. This effect initializes the gloss effect when the component mounts and removes event listeners when the component unmounts.

![useEffect code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7s8rrb73x083ve8rajk.png)

***

## Usage

To use this captivating gloss effect, simply import the `useGlossEffect` hook into your React component and call it, passing the appropriate refs. Here's how you can use it:


![usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1g25v9zn2u2ag9wfxt95.png)

***

And there you have it! You've successfully added a mesmerizing gloss effect to your React components, taking inspiration from the awesome work of Tahazsh on CodePen. Now, it's time to see your cards come to life with a captivating shine and sparkle as you hover over them.

Feel free to fork the CodePen demo and give [Tahazsh](https://codepen.io/tahazsh) a follow to explore even more inspiring UX.

Happy coding! 🚀✨

{% user mike-at-redspace %}