use-ids

As many stable React ids as you want. A tiny React hook on top of useId.

useId gives you one id, but your id wants friends and neighbors... just like you!

npm install use-ids

Examples

import { useIds } from "use-ids";

function Component() {
  const ids = useIds();

  return (
    <>
      <label htmlFor={ids.input}>Email</label>
      <input id={ids.input} aria-describedby={ids.error} />
      <strong id={ids.error}>Error message</strong>
    </>
  );
}

Your style

// Default
const ids = useIds();

// Destructured object
const {one, two, three} = useIds();

// Destructured array
const [four, five, six] = useIds();

Your ID

// Destructured object
const {id, error} = useIds("provided-id");

console.log(id); // "provided-id"
console.log(error); // "provided-id_error"

// Destructured array
const [id, meow, woof, hiss] = useIds("provided-id");

console.log(id); // "provided-id"
console.log(meow); // "provided-id_0"
console.log(woof); // "provided-id_1"
console.log(hiss); // "provided-id_2"

Your separator

Pass a custom separator as the second argument. Defaults to _.

const ids = useIds(undefined, ":");

console.log(ids.error); // ":r0::error"

Your maximum

Pass a new maximum as the third argument. Defaults to 10_000 to protect against accidental array-spreading.

useIds(undefined, undefined, 20_000);