Wondering what’s next for npm?Check out our public roadmap! »

    @charlietango/use-id
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.0 • Public • Published

    useId

    Generate a deterministic id using a ContextProvider. Use this as a way of generating unique ids for input fields, or linking aria fields.

    Checkout the Storybook demo.

    Installation

    yarn add @charlietango/use-id

    API

    const id = useId(prefix?: string)

    The useId hook should ideally be wrapped with the IdProvider. This ensures that the generated ids are deterministic, since the provider gets created once for each instance of the application.

    The hook will revert to generating the id as a side effect if the IdProvider is not included. This means you will get back undefined during the initial render.

    ⚠️ When using the hook to generate an id for an HTML element, make sure you prefix it with fixed string value - otherwise you'll create a global id that's just a number.

    Example

    import React from 'react'
    import useId, { IdProvider } from '@charlietango/use-id'
     
    const LoginForm = () => {
      const id = useId()
      const inputId = `input-${id}`
      const passwordId = `pass-${id}`
     
      return (
        <form>
          <label htmlFor={inputId}>Username:</label>
          <input id={inputId} />
          <label htmlFor={passwordId}>Password:</label>
          <input
            type="password"
            id={passwordId}
            aria-describedby={passwordId + '-desc'}
          />
          <p role="alert" id={passwordId + '-desc'}>
            Please enter a password.
          </p>
        </form>
      )
    }
     
    const App = () => {
      return (
        <IdProvider>
          <LoginForm />
        </IdProvider>
      )
    }
     
    export default App

    Keywords

    Install

    npm i @charlietango/use-id

    DownloadsWeekly Downloads

    88

    Version

    1.9.0

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar