How to Use ComponentProps in React With TypeScript

How do you make your React code cleaner and more reusable?

If you’re using React with TypeScript, you’ve probably heard about ComponentProps. This powerful tool helps you manage component properties efficiently and ensures your code stays predictable and type-safe.

In this blog, we’ll break down how to use ComponentProps simply and practically. Stick around to learn tips and examples you can use right away!

Understanding React Components and Props

React components are powerful building blocks for creating user interfaces. They are essentially JavaScript functions or ES6 classes that accept inputs (called props) and return React elements.

• Props stand for properties and are passed to components as an object, containing data or functions that influence the component’s behavior.

• React components can be defined as function components or class components.

• Developers may design complicated user interfaces by merging simpler elements because components are reusable and composable.

For instance, a function avatar might receive props and render user data dynamically. Here’s an example:

Copy
function Avatar(props: { name: string; imageUrl: string }) {
  return (
    <div className="avatar">
      <img src={props.imageUrl} alt={props.name} />
      <span>{props.name}</span>
    </div>
  );
}

Props make components adaptable, enabling child components to render data passed from their parent.

Working with ComponentProps in TypeScript

TypeScript enhances React development by providing static typing for props. The ComponentProps utility type is a key feature:

• It extracts and type-checks the props of native elements (e.g., button element, inputs, forms).

• Use cases include defining type ButtonProps or type InputProps for enhanced type safety.

• It’s also useful for extracting props from existing components, even third-party ones. For example:

Copy
import React from "react";

type ButtonProps = React.ComponentProps<'button'>;

const CustomButton: React.FC<ButtonProps> = (props) => (
  <button {...props} className="custom-button" />
);

• ComponentProps allows you to extract props from specific components efficiently.

These utilities streamline development, especially when working with all the props from components you don’t control.

Typing React Components with TypeScript

Properly typing props ensures clarity and reduces runtime errors. There are several ways to type props in React:

1. Defining prop types using TypeScript types or interfaces:

Copy
interface AvatarProps {
  name: string;
  imageUrl: string;
}

const Avatar: React.FC<AvatarProps> = ({ name, imageUrl }) => (
  <div className="avatar">
    <img src={imageUrl} alt={name} />
    <span>{name}</span>
  </div>
);

2. Using utility types like ReactNode or React.JSX.Element for props that accept React elements:

Copy
interface CardProps {
  children: React.ReactNode;
}

const Card: React.FC<CardProps> = ({ children }) => (
  <div className="card">
    {children}
  </div>
);

3. Extending React’s built-in types to include HTML attributes:

The choice between types and interfaces often depends on context, but interfaces are preferred for public APIs.

Advanced Scenarios and Best Practices

Using ComponentProps with Higher-Order Components (HoCs)

HoCs can predefine props for components:

Defining Read-Only and Optional Props

• Read-only props ensure immutability:

• Optional props provide flexibility using ?:

Exporting Props for Reusability

Export props to allow other components to reuse them:

Real-World Examples and Case Studies

1. Creating a custom Select component:

Using the react-select library, you can extract the BaseSelect props:

2. Typing Higher-Order Components (HoCs):

3. Accessing Props Data in Functional Components:

Functional components use destructuring to retrieve props data:

Final Notes!

Mastering ComponentProps is crucial for building robust, maintainable React applications. By leveraging TypeScript’s features, such as ComponentProps, interfaces, and utility types, you can:

• Ensure accurate typing for component props.

• Safeguard against runtime errors.

• Simplify integration with third-party libraries and complex UIs.

Continue exploring the evolving React ecosystem and TypeScript’s advanced utilities to stay ahead in building modern web applications.

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
}

const TextInput: React.FC<InputProps> = ({ label, ...rest }) => (
  <label>
    {label}
    <input {...rest} />
  </label>
);

import React from "react";

function withDefaultStyle<T extends React.ComponentType<any>>(Component: T) {
  return (props: React.ComponentProps<T>) => (
    <Component {...props} className={`default-style ${props.className || ''}`} />
  );
}

interface ReadOnlyProps {
  readonly value: string;
}
const ReadOnlyComponent: React.FC<ReadOnlyProps> = ({ value }) => <div>{value}</div>;

type ButtonProps = {
  label?: string;
};

export type ButtonProps = React.ComponentProps<'button'>;

export const CustomButton: React.FC<ButtonProps> = (props) => (
  <button {...props} className="custom-button" />
);

import { ComponentProps } from "react";
import Select from "react-select";

type SelectProps = ComponentProps<typeof Select>;

const CustomSelect: React.FC<SelectProps> = (props) => (
  <Select {...props} classNamePrefix="custom-select" />
);

import React from "react";

function withLogger<T>(Component: React.ComponentType<T>) {
  return (props: T) => {
    console.log(props);
    return <Component {...props} />;
  };
}

function DisplayUser({ name, age }: { name: string; age: number }) {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}