ReactNode is React’s exported type for values a component can receive as children. It covers strings, numbers, Booleans, JSX elements, arrays of these values, and omitted children without manually enumerating every case. section 5.3.2
Use ReactNode when a component accepts general-purpose children:
- Import it as a type from React and mark children optional when the component can render without content. section 5.3.2
- Prefer ReactNode over a hand-written union when children may include text, numbers, conditional values, JSX elements, or arrays. section 5.3.2
- Use PropsWithChildren when brevity is preferred; it supplies the same children typing and accepts a generic for additional props. section 5.3.2
A typed heading with additional props
import { type PropsWithChildren } from 'react'; interface HeadingProps { isLarge?: boolean; } function Heading({ isLarge = false, children }: PropsWithChildren<HeadingProps>) { return ( <h1 style={{ backgroundColor: 'hotpink', fontSize: isLarge ? '48px' : '36px' }}> {children} </h1> ); } <Heading isLarge>This is important!</Heading> section 5.3.2
import { type ReactNode } from 'react';
interface HeadingProps {
children?: ReactNode;
}
function Heading({ children }: HeadingProps) {
...
}
The direct ReactNode form makes the children contract explicit while keeping the component implementation unchanged. section 5.3.2
