flâneur

Useful Patterns by Use Case | React TypeScript Cheatsheets

react-typescript-cheatsheet.netlify.app · 3,269 words · saved by 1 readers

Wrapping/Mirroring

Wrapping/Mirroring​ Wrapping/Mirroring a HTML Element​ Usecase: you want to make a <Button> that takes all the normal props of <button> and does extra stuff. Strategy: extend React.ComponentPropsWithoutRef<'button'> // usage function App() { // Type '"foo"' is not assignable to type '"button" | "submit" | "reset" | undefined'.(2322) // return <Button type="foo"> sldkj </Button> // no error return <Button type="button"> text </Button>; } // implementation export interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> { specialProp?: string; } export function…

related reading