liveBook · Manning

Componentpropswithoutref

As explained in React in Depth

ComponentPropsWithoutRef is a React-provided generic type that derives a component's properties while excluding its ref property.

ComponentPropsWithoutRef is a React utility type that derives a component’s props while excluding ref. This matches components that receive ref through a separate mechanism rather than as an ordinary prop, especially before React 19. section 5.3.4 section 5.4

A typed BookReview wrapper

type RatingProps = ComponentPropsWithoutRef<typeof Rating>;\ntype PickedRatingProps = Pick<RatingProps, "value" | "max" | "icon">;\ninterface BookReviewProps extends PickedRatingProps {\n title: string;\n reviewer: string;\n body: string;\n}\n\nfunction BookReview({ title, reviewer, body, ...rest }: BookReviewProps) {\n return (\n <section className="review">\n <Rating max={5} {...rest} />\n <h3>{title}</h3>\n <h4>By {reviewer}</h4>\n <p>{body}</p>\n </section>\n );\n}\n\n<BookReview title="Great book" reviewer="Anonymous" body="I loved the book" value={4.8} />

How React in Depth covers it

How deep it goes
Defines derivation, ref behavior, Omit, Pick, and custom-component usage through runnable image and rating examples.
Examples
Uses UserImage wrappers and a BookReview component that selects props from Rating.
What it assumes
Assumes React and TypeScript fundamentals while demonstrating prop interfaces, generic utility types, and custom-component inference.
What you can do after
Build it from scratch, create typed wrappers that reuse, restrict, and forward component properties.
How it connects
Connects React props with ComponentProps, Pick, Omit, custom components, and forwardRef.
Cover of React in Depth
liveBookmanning.com
Read React in Depth on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of React in Depth. The section links point to the parts of the book it draws on.