├── .babelrc
├── .commitlintrc.json
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .husky
├── commit-msg
└── pre-commit
├── .nvmrc
├── .travis.yml
├── LICENSE
├── README.md
├── example
├── components
│ ├── Checkbox.tsx
│ └── Input.tsx
├── next-env.d.ts
├── next.config.js
├── package.json
├── pages
│ ├── _document.tsx
│ └── index.tsx
├── tsconfig.json
└── yarn.lock
├── package.json
├── release.sh
├── rollup.config.js
├── src
├── index.ts
├── nextId.test.ts
├── nextId.ts
├── useId.test.tsx
└── useId.ts
├── tsconfig.json
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/typescript", "@babel/env", "@babel/react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.commitlintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["@commitlint/config-conventional"]
3 | }
4 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .next
4 | lib
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "eslint:recommended",
4 | "plugin:react/recommended",
5 | "plugin:@typescript-eslint/eslint-recommended",
6 | "plugin:@typescript-eslint/recommended",
7 | "prettier"
8 | ],
9 | "parser": "@typescript-eslint/parser",
10 | "env": {
11 | "jest": true,
12 | "node": true,
13 | "browser": true
14 | },
15 | "plugins": ["@typescript-eslint"],
16 | "rules": {
17 | "@typescript-eslint/explicit-member-accessibility": "off",
18 | "@typescript-eslint/explicit-function-return-type": "off"
19 | },
20 | "settings": {
21 | "react": {
22 | "version": "detect"
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | .next
4 | .vscode
5 | package-lock.json
6 | lib
7 | build
--------------------------------------------------------------------------------
/.husky/commit-msg:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | yarn commitlint --edit $1
5 |
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 | . "$(dirname "$0")/_/husky.sh"
3 |
4 | yarn lint-staged
5 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v15
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "10"
4 | script:
5 | - yarn lint
6 | - yarn typecheck
7 | - yarn test
8 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2019 Tomek
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-id-generator [![npm version][npm-badge]][npm-link] [![Build Status][ci-badge]][ci-link] [![ts][ts-badge]][ts-link]
2 |
3 | Generate unique id's in React components (e.g. for accessibility).
4 |
5 | **Features:**
6 |
7 | - Generates unique but predictable id's ✔︎
8 | - Works with server-side rendering ✔︎
9 | - TypeScript support ✔︎
10 |
11 | See an example with [Next.js](https://nextjs.org/) app:
12 |
28 | {children}
29 |
31 | );
32 | }
33 | }
34 |
35 | // Or with hooks:
36 | import React from "react";
37 | import { useId } from "react-id-generator";
38 |
39 | const RadioButton = ({ children, ...rest }) => {
40 | const [htmlId] = useId();
41 |
42 | return (
43 |
44 | {children}
45 |
47 | );
48 | };
49 | ```
50 |
51 | Each instance of `RadioButton` will have unique `htmlId` like: _id-1_, _id-2_, _id-3_, _id-4_ and so on.
52 |
53 | ### `nextId`
54 |
55 | 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:
56 |
57 | ```js
58 | import nextId from "react-id-generator";
59 |
60 | const id1 = nextId(); // id: id-1
61 | const id2 = nextId("test-id-"); // id: test-id-2
62 | const id3 = nextId(); // id: id-3
63 | ```
64 |
65 | NOTE: Don't initialize `htmlId` in React lifecycle methods like _render()_. `htmlId` should stay the same during component lifetime.
66 |
67 | ### `useId`
68 |
69 | 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.
70 |
71 | By default it will return an array with single element:
72 |
73 | ```jsx
74 | const idList = useId(); // idList: ["id1"]
75 | ```
76 |
77 | but you can specify how many id's it should return:
78 |
79 | ```jsx
80 | const idList = useId(3); // idList: ["id1", "id2", "id3"]
81 | ```
82 |
83 | you can also set a prefix for them:
84 |
85 | ```jsx
86 | const idList = useId(3, "test"); // idList: ["test1", "test2", "test3"]
87 | ```
88 |
89 | **New id's will be generated only when one of the arguments change.**
90 |
91 | ### `resetId`
92 |
93 | 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`):
94 |
95 | > Warning: Prop `id` did not match. Server: "test-5" Client: "test-1"
96 |
97 | While in browser generator will always start from "1", durring SSR we need to manually reset it before generating markup for client:
98 |
99 | ```javascript
100 | import { resetId } from "react-id-generator";
101 |
102 | server.get("*", (req, res) => {
103 | resetId();
104 |
105 | const reactApp = (
106 |
107 |
108 |
109 |
111 |
112 |
113 | );
114 | const html = renderToString(reactApp);
115 |
116 | res.render("index", { html });
117 | }
118 | ```
119 |
120 | This should keep ids in sync both in server and browser generated markup.
121 |
122 | ### `setPrefix`
123 |
124 | You can set prefix globally for every future id that will be generated:
125 |
126 | ```javascript
127 | import { setPrefix } from "react-id-generator";
128 |
129 | setPrefix("test-id-");
130 |
131 | const id1 = nextId(); // id: test-id-1
132 | const id2 = nextId(); // id: test-id-2
133 | const id3 = nextId("local"); // id: local-3 - note that local prefix has precedence
134 | ```
135 |
136 | ### Running example in the repo:
137 |
138 | 1. First build the package: `yarn build && yarn build:declarations`
139 | 2. Go to `example/` directory and run `yarn dev`
140 |
141 |
8 | Checkbox with id: {id1}
9 |
11 | );
12 | };
13 |
14 | export default Checkbox;
15 |
--------------------------------------------------------------------------------
/example/components/Input.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import nextId from "../../lib";
3 |
4 | class Input extends React.Component {
5 | uniqueId = nextId();
6 |
7 | render(): JSX.Element {
8 | return (
9 |
10 | Input with id: {this.uniqueId}
11 |
14 | );
15 | }
16 | }
17 |
18 | export default Input;
19 |
--------------------------------------------------------------------------------
/example/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// {
8 | // _document is only rendered on the server side and not on the client side
9 | // this will reset id keeping markup consistent across server and browser
10 | resetId();
11 |
12 | const initialProps = await Document.getInitialProps(ctx);
13 | return { ...initialProps };
14 | }
15 | }
16 |
17 | export default MyDocument;
18 |
--------------------------------------------------------------------------------
/example/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Input from "../components/Input";
3 | import Checkbox from "../components/Checkbox";
4 | import { setPrefix } from "../../lib";
5 |
6 | setPrefix("test-");
7 |
8 | const IndexPage: React.FC = () => (
9 |
10 |
11 | Try to refresh page and look to the console - it's clear!
14 | ();
14 | React.useEffect(() => {
15 | ref.current = value;
16 | });
17 | return ref.current;
18 | }
19 |
20 | export default function useId(count = 1, prefix?: string): string[] {
21 | const idsListRef = React.useRef([]);
22 | const prevCount = usePrevious(count);
23 | const prevPrefix = usePrevious(prefix);
24 |
25 | if (count !== prevCount || prevPrefix !== prefix) {
26 | idsListRef.current = getIds(count, prefix);
27 | }
28 |
29 | return idsListRef.current;
30 | }
31 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "moduleResolution": "node",
5 | "strict": true,
6 | "esModuleInterop": true,
7 | "jsx": "react",
8 | "types": [],
9 | "noImplicitAny": true
10 | },
11 | "include": ["src"],
12 | "exclude": ["node_modules", "**/*.test.*", "lib", "example"]
13 | }
14 |
--------------------------------------------------------------------------------