React, TypeScript: JSX Element Auto-Completion

Improve React development efficiency using ComponentPropsWithoutRef.

--- views
•

React, TypeScript: JSX Element Auto-Completion

Many developers define an interface named Props for their React components and consider it sufficient.

interface Props {
  children?: React.ReactNode
  some_prop: string
}

jsx

However, there's a more effective approach! Import ComponentPropsWithoutRef and assign it to the element you want to set props for.

Code

import type { FC, ComponentPropsWithoutRef } from "react"

export const DivContainer: FC<ComponentPropsWithoutRef<"div">> = () => (
    <div></div>
)

jsx

This method enhances the development experience by letting TypeScript infer and enforce the correct props for the specified HTML element.