Prop Getter Pattern

Definition

Pattern qui fournit des fonctions (getInputProps, getToggleProps) retournant les props necessaires pour un element, fusionnant les props utilisateur avec celles du composant.

Analogie

Comme un styliste qui te donne un ensemble complet : tu peux ajouter tes accessoires, il gere 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 gerer l'accessibilite tout en restant flexibles.

Termes lies