How To Use refs in React With TypeScript?

Last Updated : 14 Oct, 2024

To use refs in React with TypeScript, you can take advantage of the ref attribute to directly interact with DOM elements or child components. Refs provide a way to access the underlying DOM node or React component instance and can be especially useful when you need to manage focus, control animations, or store previous state values.

In this article, we’ll explore two main approaches for using refs in React with TypeScript:

Table of Content

Approach 1: Using refs Inside the class-based component with TypeScript

Class components are an older approach in React, but they are still widely used. In TypeScript, you can define refs in class components by creating a reference using React.createRef() and attaching it to a DOM element.

Syntax:

private ref_name = React.createRef<refType>();

Example: The below code example will explain how you can create typed refs in React using TypeScript.

TypeScript

import React, { Component } from 'react'; import { render } from 'react-dom';  class App extends Component {     private inputRef = React.createRef < HTMLInputElement > ();     private divRef = React.createRef < HTMLDivElement > ();     formSubmitHandler = (e) => {         e.preventDefault();         if (inputRef.current.value) {             divRef.current.textContent =                 "The entered value accessed using typed refs is: " +                 inputRef.current.value;         }         else {             divRef.current.textContent =                 "Input field can not be Empty!!";         }     };     render() {         return (             <div style={{ textAlign: 'center' }}>                 <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>                 <form onSubmit={this.formSubmitHandler}>                     <input type="text" ref={this.inputRef} style={                         {                             padding: '8px',                             borderRadius: '5px'                         }} />                     <br />                     <br />                     <button style={                         {                             color: '#fff',                             background: 'green',                             border: 'none',                             padding: '10px',                             cursor: 'pointer',                             borderRadius: '5px'                         }}>                         Get Entered Value                     </button>                 </form>                 <div style={{ marginTop: '30px' }}                     ref={this.divRef}></div>             </div>         );     } }  render(<App />, document.getElementById('root'));

Output:

Using refs Inside the class-based component with TypeScript

Approach 2: Using refs inside the functional components with TypeScript

With the introduction of hooks, functional components have become more common in modern React development. You can use the useRef hook in functional components to manage refs in TypeScript.

Syntax:

const refName = React.useRef<refType>(null);

Example: The below code example will explain how you can use the React refs with TypeScript inside the functional components.

TypeScript

import React, { useRef } from 'react'; import { render } from 'react-dom';  // Functional Component const App = () => {     const inputRef = React.useRef < HTMLInputElement > (null);     const divRef = React.useRef < HTMLDivElement > (null);      // Handling Form Submission     const formSubmitHandler = (e) => {         e.preventDefault();         if (inputRef.current.value) {             divRef.current.textContent =                 "The entered value accessed using typed refs is: " +                 inputRef.current.value;         }         else {             divRef.current.textContent =                  "Input field can not be Empty!!";         }     };      return (         <div style={{ textAlign: 'center' }}>             <h1 style={{ color: 'green' }}>GeeksforGeeks</h1>             <form onSubmit={formSubmitHandler}>                 <input type="text" ref={inputRef} style={                     {                         padding: '8px',                         borderRadius: '5px'                     }                 } />                 <br />                 <br />                 <button style={                     {                         color: '#fff',                         background: 'green',                         border: 'none',                         padding: '10px',                         cursor: 'pointer',                         borderRadius: '5px'                     }}>                     Get Entered Value                 </button>             </form>             <div style={{ marginTop: '30px' }} ref={divRef}></div>         </div>     ); }

Output:

Using refs inside the functional components with TypeScript

Difference Between Class Components and Functional Components with Refs

In class components, refs are created using React.createRef() and accessed using this.inputRef.
In functional components, refs are created using the useRef() hook, and you directly access the current value using inputRef.current.

Conclusion

To use refs in React with TypeScript, you can apply them in both class-based and functional components depending on the approach you're using. In class components, use React.createRef(), and in functional components, use useRef(). By specifying types like HTMLInputElement in TypeScript, you ensure type safety and can avoid potential runtime errors. This makes refs a powerful and efficient way to directly access DOM elements or component instances in your React application.

How to use TypeScript with React?

abhish8rzd

Improve

Article Tags :

How To Use refs in React With TypeScript?

Approach 1: Using refs Inside the class-based component with TypeScript

Approach 2: Using refs inside the functional components with TypeScript

Difference Between Class Components and Functional Components with Refs

Conclusion

Similar Reads