Package Exports

react-uid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-uid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

UID

Generate UID for an item, Renderless UID containers, SSR-friendly UID generation

API

uid - generates UID for an object(function and so on). Quite usable for React key property.

 import {uid} from 'react-uid';
 
 data.map( item => <li key={uid(item)}>{item}</li>)

UID - renderless container for generation Ids

 import {UID} from 'react-uid';

 <UID>
     {id => (
       <Fragment>
         <input id={id} />
         <label htmlFor={id} />
       </Fragment> 
     )}
 </UID>

 // you can apply some "naming conventions" to the keys
  <UID name={ id => `unique-${id}` }>
      {id => (
        <Fragment>
          <input id={id} />
          <label htmlFor={id} />
        </Fragment>
      )}
  </UID>
  
  // UID also provide `uid` as a second agrument
  <UID>
       {(id,uid) => (
         data.map( item => <li key={uid(item)}>{item}</li>) 
       )}
   </UID>

UIDReset && SmartUID - SSR friendly UID. Could maintain consistency across renders. Including "scoped" uid, available as a second argument.

 import {UIDReset, SmartUID} from 'react-uid';

 <UIDReset>
     <SmartUID>
         {(id,uid) => (
           <Fragment>
             <input id={id} />
             <label htmlFor={id} />
             data.map( item => <li key={uid(item)}>{item}</li>)
           </Fragment> 
         )}
     </SmartUID>
 </UIDReset>

Licence

MIT