ComponentProps is a React generic utility type for deriving the properties accepted by an intrinsic element or custom component. It avoids manually reproducing large prop surfaces, such as the many attributes and event handlers supported by an <img> element. section 5.3.4
Choose the variant and composition pattern according to the boundary you are designing:
- Prefer ComponentPropsWithoutRef when the component receives ordinary props and should not expose ref as a regular property. section 5.3.4
A typed wrapper around a rating component
type RatingProps = ComponentPropsWithoutRef<typeof Rating>; type PickedRatingProps = Pick<RatingProps, "value" | "max" | "icon">; interface BookReviewProps extends PickedRatingProps { title: string; reviewer: string; body: string; } function BookReview({ title, reviewer, body, ...rest }: BookReviewProps) { return ( <section className="review"> <Rating max={5} {...rest} /> <h3>{title}</h3> <h4>By {reviewer}</h4> <p>{body}</p> </section> ); }
