Tomekmularczyk/react-id-generator

README

react-id-generator

Generate unique id's in React components (e.g. for accessibility).

Features:

Generates unique but predictable id's ✔︎
Works with server-side rendering ✔︎
TypeScript support ✔︎

See an example with Next.js app:

Basic example:

import React from "react";
import nextId from "react-id-generator";

class RadioButton extends React.Component {
  htmlId = nextId();

  render() {
    const { children, ...rest } = this.props;
    return (
      <div>
        <label htmlFor={this.htmlId}>{children}</label>
        <input id={this.htmlId} type="radio" {...rest} />
      </div>
    );
  }
}

// Or with hooks:
import React from "react";
import { useId } from "react-id-generator";

const RadioButton = ({ children, ...rest }) => {
  const [htmlId] = useId();

  return (
    <div>
      <label htmlFor={htmlId}>{children}</label>
      <input id={htmlId} type="radio" {...rest} />
    </div>
  );
};

Each instance of RadioButton will have unique htmlId like: id-1, id-2, id-3, id-4 and so on.

`nextId`

This is simple function that returns unique id that's incrementing on each call. It can take an argument which will be used as prefix:

import nextId from "react-id-generator";

const id1 = nextId(); // id: id-1
const id2 = nextId("test-id-"); // id: test-id-2
const id3 = nextId(); // id: id-3

NOTE: Don't initialize htmlId in React lifecycle methods like render(). htmlId should stay the same during component lifetime.

`useId`

This is a hook that will generate id (or id's) which will stay the same across re-renders - it's a function component equivalent of nextId. However, with some additional features.

By default it will return an array with single element:

const idList = useId(); // idList: ["id1"]

but you can specify how many id's it should return:

const idList = useId(3); // idList: ["id1", "id2", "id3"]

you can also set a prefix for them:

const idList = useId(3, "test"); // idList: ["test1", "test2", "test3"]

New id's will be generated only when one of the arguments change.

`resetId`

This function will reset the id counter. Main purpose of this function is to avoid warnings thrown by React durring server-side rendering (and also avoid counter exceeding Number.MAX_SAFE_INTEGER):

Warning: Prop id did not match. Server: "test-5" Client: "test-1"

While in browser generator will always start from "1", durring SSR we need to manually reset it before generating markup for client:

import { resetId } from "react-id-generator";

server.get("*", (req, res) => {
  resetId();

  const reactApp = (
    <ServerLocation url={req.url}>
      <StyleSheetManager sheet={sheet.instance}>
        <Provider store={store}>
          <App />
        </Provider>
      </StyleSheetManager>
    </ServerLocation>
  );
  const html = renderToString(reactApp);

  res.render("index", { html });
}

This should keep ids in sync both in server and browser generated markup.

`setPrefix`

You can set prefix globally for every future id that will be generated:

import { setPrefix } from "react-id-generator";

setPrefix("test-id-");

const id1 = nextId(); // id: test-id-1
const id2 = nextId(); // id: test-id-2
const id3 = nextId("local"); // id: local-3 - note that local prefix has precedence

Running example in the repo:

First build the package: yarn build && yarn build:declarations
Go to example/ directory and run yarn dev

Props go to people that shared their ideas in this SO topic.