@ryvora/react-id

ID Generator 🆔

Hello, Uniqueness Seeker! 🕵️‍♀️

The id module, typically providing a useId hook, is your trusty assistant for generating unique IDs within your React components. This is incredibly useful for accessibility (a11y) attributes like aria-labelledby, aria-describedby, or associating labels with form inputs.

It's like a little ID card printer for your components, ensuring everyone has a unique identifier! 💳

Why is it important?

• Accessibility: Many ARIA attributes require ID references to link elements together (e.g., a custom select trigger to its listbox).
• Server-Side Rendering (SSR): Ensures that IDs generated on the server match those on the client, preventing hydration mismatches.

Basic Usage

import { useId } from '@ryvora/react-id';

function MyFormControl() {
  const inputId = useId();
  const descriptionId = useId();

  return (
    <div>
      <label htmlFor={inputId}>My Input:</label>
      <input id={inputId} type="text" aria-describedby={descriptionId} />
      <p id={descriptionId}>This is a description for the input.</p>
    </div>
  );
}

Keep your components uniquely identified and accessible! ✨