Open In App

Using the useRef hook to change an element’s style in React

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to change an element’s style using the useRef hook. UseRef() allows us to create a reference to a DOM element and keep track of variables without causing re-renders. 

Prerequisites:

To use a ref to change an element’s style in React:

  • We will import the useRef hook to access the DOM element we wish to style
  • Then, declare a ref and pass it to the DOM element as the ref attribute.
  • useRef returns a reference object having a single property, i.e., current.
  • React puts a reference to the DOM element into the ref current, which we can access through an event handler.
  • We will access the element via the current property on the ref.
  • Finally, we will update the element’s style through ref.current.style. 

Let us understand this concept through the following example.

Approach:

To implement style change using useRef hook we will create a div element with some text. Then we will use the useRef hook to change the style of this div. We will create a button that will enable dark mode, i.e., change the div’s background to black. Below is the step-by-step implementation. 

The useRef has a lot of importance in development, one of which is accessing the DOM directly. The useRef hook enables us to handle DOM manipulations. We can directly access DOM elements by adding a ref attribute to an element. By accessing the DOM, we can even manipulate the styles of an element. We can use the style property to set styles on the DOM element.

Syntax:

const refContainer = useRef(initialValue);

Steps to Create React Application:

Step 1: Make a project directory, head over to the terminal, and create a react app named “gfg-card” using the following command:

npx create-react-app gfg-card

Step 2: After the gfg-card app is created, switch to the new folder gfg-card using the following command:

cd gfg-card

Project Structure:  

Final Directory Structure 

Example: This example demonstrate how to use useRef Hook to change an element’s styles when the click event triggers.

Javascript




// App.js
 
// Importing useRef
import { useRef } from "react";
 
const App = () => {
    //creating a ref
    const ref = useRef();
    // Styling the element
    const handleClick = () => {
        ref.current.style.backgroundColor = "black";
        ref.current.style.padding = "3rem";
        ref.current.style.color = "white";
        ref.current.style.width = "150px";
        ref.current.style.height = "150px";
        ref.current.style.margin = "50px";
        ref.current.style.borderRadius = "10px";
    };
 
    return (
        <div>
            <h2>Welcome to geeksforgeeks</h2>
            <button onClick={handleClick}>Enable dark mode</button>
 
            <br />
            <br />
 
            {/* Passing the ref to the DOM element ,
                we wish to style */}
            <div ref={ref}>
                Article on styling an element using useRef hook in React
            </div>
        </div>
    );
};
 
export default App;


Step to run the application: Run the application by using the following command:

npm start 

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser. By clicking the button, we can see how the useRef hook has changed the style of the div. 

Output: Changing styles of an element using the useRef hook 



Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads