@utilityjs/use-deterministic-id

A React hook that generates a deterministic unique ID once per component.

Usage no npm install needed!

<script type="module">
  import utilityjsUseDeterministicId from 'https://cdn.skypack.dev/@utilityjs/use-deterministic-id';
</script>

README

useDeterministicId

A React hook that generates a deterministic unique ID once per component.

npm i @utilityjs/use-deterministic-id | yarn add @utilityjs/use-deterministic-id

Usage

const App = (props) => {
  const id = useDeterministicId();
  // or useDeterministicId(props.id)

  return (
    <div className="app">
      <label htmlFor={id}>Label</label>
      <input type="text" name="text-input" id={id} />
    </div>
  );
};

Credit

Full credits to Material-UI

API

`useDeterministicId(idOverride?, prefix?)`

declare const useDeterministicId: (
  idOverride?: string | undefined,
  prefix?: string
) => string | undefined;

`idOverride`

Allows you to override the generated id with your own id.

`prefix`

Allows you to prefix the generated id.