Polymorphic Components

Définition

Composants qui peuvent changer leur élément HTML racine via une prop 'as' ou 'component', tout en conservant un typage TypeScript correct.

Analogie

Comme un costume transformable : le même vêtement peut devenir veste, gilet ou manteau selon le bouton presse.

Exemple de code

function Box<C extends React.ElementType = 'div'>(
  { as, children, ...props }: { as?: C } & React.ComponentPropsWithoutRef<C>
) {
  const Component = as || 'div';
  return <Component {...props}>{children}</Component>;
}
<Box as="section">...</Box>
<Box as="a" href="/">Lien</Box>

Cas d'usage

Design systems ou un même composant stylise doit s'adapter a différents éléments HTML sémantiques.

Termes liés