PropsWithChildren is a React TypeScript utility type that adds an optional children property to a component's other props. It provides the same broad child-node coverage as ReactNode without manually listing strings, numbers, Booleans, JSX elements, and arrays. section 5.3.2 section 5.4
Use the generic parameter when the component accepts additional props:
- Define non-children props separately, then pass that interface to PropsWithChildren. section 5.3.2
- Rely on its default empty props type when children are the only component prop. section 5.3.2
- Prefer PropsWithChildren for brevity when broad React child values are acceptable; type ReactNode directly when that form is clearer for the component API. section 5.3.2 section 5.4
Heading with an additional prop
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
The generic argument defaults to an empty props interface in React 18 and later. React 17 and earlier require an explicit type argument when no additional props are defined. section 5.3.2
