@greenberry/use-label-prefix

@greenberry/use-label-prefix

Why?

When generating a lot of input groups on one page it can get tedious to create a unique label/id for each input group. However this is required when you want to keep semantics and accessibility functionalities. This hook generates a prefix for your labels which persist over multiple updates and are unique per instance of the component.

Installation

yarn add @greenberry/use-label-prefix
# or
npm i @greenberry/use-label-prefix

Usage

// Minimal example
const prefixed = useLabelPrefix('my-label');

// With larger prefix; defaults to 8
const prefixed2 = useLabelPrefix('my-label', 16);

Inside a component

const MyInput = () => {
  const prefixedLabel = useLabelPrefix('my-label');

  return (
    <div>
      <label htmlFor={prefixedLabel}>
        Hello Prefix
      </label>
      <input id={prefixedLabel} type="text" />
    </div>
  );
};