How To Use refs in React With TypeScript?
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.
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:
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.
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:
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.
