|
React refs offer a way to access DOM elements directly, bypassing React’s virtual DOM. This feature is particularly useful for tasks like managing focus, text selection, or integrating third-party libraries. When using React with TypeScript, you can write more precise and maintainable code, but there are specific considerations to keep in mind.
Key Considerations for Using React Refs with TypeScript- File Extensions: Save your files with a .tsx extension to enable TypeScript support in React components.
- Typing Refs: Explicitly type your refs during declaration to ensure type safety and leverage TypeScript’s robust type-checking capabilities.
We will see the use of the React refs with TypeScript inside the Class-Based Components and Functional Components with the help of practical implementation using the code examples.
Using refs Inside the class-based component with TypeScriptIn the class-based components, the React refs will be created using the React.createRef() method. But, we will use this method with an explicit type to specify the type of the ref using the <refType>.
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 functional components with TypeScriptThe refs will be added using the useRef() hook when working with the functional components. We will use the same syntax <refType> to explicitly type the refs with a null value passed inside the parenthesis as parameter to set the initial value.
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:
|
