{"id":21302772,"url":"https://github.com/team-griffin/react-unique-id","last_synced_at":"2025-07-11T20:31:52.675Z","repository":{"id":18537211,"uuid":"84552837","full_name":"team-griffin/react-unique-id","owner":"team-griffin","description":"Generate unique ids for your react components","archived":false,"fork":false,"pushed_at":"2022-12-08T18:18:42.000Z","size":1260,"stargazers_count":3,"open_issues_count":22,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-26T18:56:41.271Z","etag":null,"topics":["forms","id","react","unique"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@team-griffin/react-unique-id","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/team-griffin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-10T11:23:25.000Z","updated_at":"2020-04-30T14:18:48.000Z","dependencies_parsed_at":"2023-01-13T19:53:03.325Z","dependency_job_id":null,"html_url":"https://github.com/team-griffin/react-unique-id","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/team-griffin/react-unique-id","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/team-griffin%2Freact-unique-id","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/team-griffin%2Freact-unique-id/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/team-griffin%2Freact-unique-id/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/team-griffin%2Freact-unique-id/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/team-griffin","download_url":"https://codeload.github.com/team-griffin/react-unique-id/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/team-griffin%2Freact-unique-id/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262610410,"owners_count":23336867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","id","react","unique"],"created_at":"2024-11-21T15:57:41.665Z","updated_at":"2025-07-11T20:31:52.324Z","avatar_url":"https://github.com/team-griffin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-unique-id\n\n`npm install @team-griffin/react-unique-id --save`\n\n`yarn add @team-griffin/react-unique-id`\n\nIt gets rather annoying coming up with ids for form controls, as well as when you have to deal with looping over form component.\nSo why not make a react component to do it for us?\n\nUniqueId creates a unique id before the component will be mounted to ensure that the same id is passed down to the component each time. This is to reduce re-renders.\n\n## Usage\n\nThis package offers unique ids in two flavours, either as a component or a hoc. They both work in the same way. In fact the component version is just a wrapper around the HOC.\n\n### `\u003cUniqueId/\u003e` Component\n\nThe component you wish to render can be provided in 3 different forms:\n1. A render function. This is good if you have props that need to be mapped due to the new `id` prop\n1. A React Component. Use this if you just want an id to be automatically applied to a given component. Avoid passing functions that are created per render in here as React will not be able to determine that they are the same constructor and therefore lots of re-renders\n1. A React Symbol (already created Component). You won't use this often, but is useful if the component you want to give an id has already been created somewhere else in the code\n\nThe id that is generated is an auto incrementing integer. You can provide a `prefix` prop to have prefixed infront of the output.\n\n```jsx\nimport UniqueId from '@team-griffin/react-unique-id';\n\nconst MyComponentThatNeedsAnId = (props) =\u003e (\n  \u003cdiv id={props.id}\u003e\n    Hello World!\n  \u003c/div\u003e\n);\n\n// Elsewhere\nconst MyParentComponent = (props) =\u003e {\n  // Render method 1\n  return (\n    \u003cUniqueId render={(props) =\u003e {\n      \u003cMyComponentThatNeedsAnId\n        id={props.id}\n      /\u003e\n    }}/\u003e\n  );\n\n  // Render method 2\n  return (\n    \u003cUniqueId component={MyComponentThatNeedsAnId}/\u003e\n  );\n\n  // Render method 3\n  const myComp = (\n    \u003cMyComponentThatNeedsAnId/\u003e\n  );\n\n  return (\n    \u003cUniqueId component={myComp}/\u003e\n  );\n};\n```\n\n### `withUniqueId` HOC\n\nEssentially the same as the component, but doesn't care about rendering. Supports both a runtime prefix and a static prefix.\nThe added benefit of using the HOC implementation is that you can override how the id is generated. This is useful if you want to use a `uuid` or a `ulid` instead of an integer. This is only supported a static time. Just provide it into the HOC config under the key `generateId`. The prefix functionality is still preserved with this enabled.\n\n```jsx\nimport { withUniqueId } from '@team-griffin/react-unique-id';\n\nconst MyComponentThatNeedsAnId = (props) =\u003e (\n  \u003cdiv id={props.id}\u003e\n    Hello World!\n  \u003c/div\u003e\n);\n\nconst enhanced = withUniqueId({\n  prefix: string, // Static prefix, will be used if no runtime one is provided\n  generateId: () =\u003e string, // Defaults to internal `generateIntId`\n})(MyComponentThatNeedsAnId);\n\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteam-griffin%2Freact-unique-id","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteam-griffin%2Freact-unique-id","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteam-griffin%2Freact-unique-id/lists"}