Logo for jsDocs.io

react-uid

  • Version 2.3.3
  • Published
  • 46.8 kB
  • 1 dependency
  • MIT license

Install

npm i react-uid
yarn add react-uid
pnpm add react-uid

Overview

Render-less container for ID generation

Index

Variables

Functions

Classes

Variables

variable UIDConsumer

const UIDConsumer: React.FC<UIDProps>;

  • UID in form of renderProps. Supports nesting and SSR. Prefer useUID hook version if possible.

    Example 1

    // get UID to connect label to input {(id)} => <label htmlFor={id}><input id={id}/>}

    // get uid to generate uid for a keys in a list {(, uid)} => items.map(item => <li key={uid(item) />)}

    See Also

    • https://github.com/thearnica/react-uid#server-side-friendly-uid

    • https://github.com/thearnica/react-uid#react-components

    • useUID - a hook version of this component

    • UID - not SSR compatible version

variable UIDFork

const UIDFork: React.FC<React.PropsWithChildren<WithPrefix>>;

  • Creates a sub-ids for nested components, isolating from inside a branch. Useful for self-contained elements or code splitting

    See Also

    • https://github.com/thearnica/react-uid#code-splitting

variable UIDReset

const UIDReset: React.FC<React.PropsWithChildren<WithPrefix>>;

  • UID isolation component, required for SSR and testing. Wrap your application with it to guarantee UID consistency between SSR and CSR.

    Parameter prefix

    prefix for all generated ids

    Example 1

    </UIDReset/>

    See Also

    • https://github.com/thearnica/react-uid#server-side-friendly-uid

Functions

function uid

uid: (item: any, index?: number) => string;

  • uid returns an UID associated with {item}

    Parameter item

    object to generate UID for

    Parameter index

    , a fallback index

    Example 1

    uid(object) == 1; uid(object) == 1; uid(anotherObject) == 2; uid("not object", 42) == 42

    See Also

function useUID

useUID: () => string;

  • returns and unique id. SSR friendly returns {String}

    Example 1

    const id = useUID(); id == 1; // for example

    See Also

    • UIDConsumer

    • https://github.com/thearnica/react-uid#hooks-168

function useUIDSeed

useUIDSeed: () => SeedGenerator;

  • returns an uid generator

    Example 1

    const uid = useUIDSeed(); return ( <> <label for={seed('email')}>Email: <input id={seed('email')} name="email" /> {data.map(item => <div key={seed(item)}>... </> )

    See Also

    • UIDConsumer

    • https://github.com/thearnica/react-uid#hooks-168

Classes

class UID

class UID extends React.Component<UIDProps> {}

  • Example 1

    // get UID to connect label to input {(id)} => <label htmlFor={id}><input id={id}/>}

    // get uid to generate uid for a keys in a list {(, uid)} => items.map(item => <li key={uid(item) />)}

    See Also

    • https://github.com/thearnica/react-uid#react-components

    Deprecated

    UID in form of renderProps (not SSR friendly)

property state

state: { quartz: import('./context').IdSourceType; prefix: string; id: number };

    property uid

    uid: (item: any) => string;

      method render

      render: () => React.ReactNode;

        Package Files (5)

        Dependencies (1)

        Dev Dependencies (4)

        Peer Dependencies (2)

        Badge

        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-uid.

        • Markdown
          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-uid)
        • HTML
          <a href="https://www.jsdocs.io/package/react-uid"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>