@razorpay/blade
Version:
The Design System that powers Razorpay
47 lines (43 loc) • 1.6 kB
JavaScript
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import * as React from 'react';
import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
/**
* Credit: https://github.com/reach/reach-ui/blob/dev/packages/auto-id/src/auto-id.ts
*/
var handoffComplete = false;
var id = 0;
var genId = function genId() {
return ++id;
};
/**
* Reack hook to generate unique id
* It helps us provide stable ID which we can reference in the components
* and also works in server side rendered component
* TODO: Add support for `React.useId` after React18 upgrade
*
* @param prefix prefix to append before the id
* @param idProp the external id passed from the user
*/
var useId = function useId(prefix, idProp) {
var initialId = idProp || (handoffComplete ? genId() : null);
var _React$useState = React.useState(initialId),
_React$useState2 = _slicedToArray(_React$useState, 2),
uid = _React$useState2[0],
setUid = _React$useState2[1];
useIsomorphicLayoutEffect(function () {
// Patch the ID after render. We do this in `useLayoutEffect` to avoid any
// rendering flicker, though it'll make the first render slower (unlikely
// to matter, but you're welcome to measure your app and let us know if
// it's a problem).
if (uid === null) setUid(genId());
}, []);
React.useEffect(function () {
if (!handoffComplete) {
handoffComplete = true;
}
}, []);
var id = uid != null ? uid.toString() : undefined;
return prefix ? "".concat(prefix, "-").concat(id) : id;
};
export { useId };
//# sourceMappingURL=useId.js.map