id-generator-ts
v0.0.6
Published
Generate Universally Unique Identifiers (UUIDs) in your React apps with ease using this custom React hook. Ensure uniqueness and randomness, even in browsers without native crypto support. Ideal for creating unique keys, tracking, and data management.
Downloads
15
Maintainers
Readme
id-generator-ts
Description:
useUUID
is a JavaScript/TypeScript utility function that generates universally unique identifiers (UUIDs). UUIDs are 128-bit identifiers that are guaranteed to be unique.
This useUUID function is designed to provide a UUID regardless of the user's environment's cryptographic capabilities. When possible, it uses a more secure method, but it also provides a fallback for environments where cryptographic randomness is not available.
Browser with Crypto API
When running in a modern browser that supports the crypto API, useUUID will utilize the browser's cryptographically secure random number generator to generate UUIDs.
Fallback for Non-Browser Environments
In environments where the crypto API is not available (e.g., Node.js or older browsers), useUUID will use a fallback method that relies on pseudo-random numbers generated by JavaScript's Math.random() function. While this method is not as secure as the crypto API, it provides a reasonable alternative for generating UUIDs.
Features:
- Cross-browser compatibility: Generates UUIDs reliably across various web browsers.
- Secure UUID generation: Utilizes browser-native crypto when available, ensuring high-quality randomness.
- Fallback for unsupported browsers: Provides a secure fallback method for browsers lacking crypto support.
- Easy integration: Simply import and use the hook in your React components to access UUIDs.
License
This project is licensed under the MIT License.
Installation
npm install id-generator-ts
Usage
import useUUID from 'id-generator-ts';
const myList = [
{ age: 32, name: 'foo' },
{ age: 37, name: 'bar' },
{ age: 39, name: 'baz' },
];
const MyComponent = () => {
return (
<div>
{myList.map((item) => (
<div key={useUUID()}>
<p>{item.name}</p>
<p>{item.age}</p>
</div>
))}
</div>
);
};