Prop Getter Pattern

Définition

Pattern qui fournit des fonctions (getInputProps, getToggleProps) retournant les props nécessaires pour un élément, fusionnant les props utilisateur avec celles du composant.

Analogie

Comme un styliste qui te donne un ensemble complet : tu peux ajouter tes accessoires, il gère l'harmonie du tout.

Exemple de code

function useSelect() {
  const [isOpen, setOpen] = useState(false);
  const getToggleProps = (userProps = {}) => ({
    'aria-expanded': isOpen,
    onClick: () => { userProps.onClick?.(); setOpen(!isOpen); },
    ...userProps,
  });
  return { isOpen, getToggleProps };
}
<button {...getToggleProps({ className: 'btn' })}>Toggle</button>

Cas d'usage

Composants headless et librairies qui doivent gérer l'accessibilite tout en restant flexibles.

Termes liés