@instructure/ui-react-utils
Version:
A React utility library made by Instructure Inc.
29 lines • 1.28 kB
TypeScript
/**
* A React hook that provides deterministic ID generation for functional components.
*
* This hook is the functional component equivalent of the `withDeterministicId` decorator.
* It uses the `DeterministicIdContext` which is needed for deterministic id generation.
*
* The context is there for the users to pass an `instanceCounterMap` Map which is then used
* in the child components to deterministically create ids for them based on the `instanceCounterMap`.
* Read more about it here: [SSR guide](https://instructure.design/#server-side-rendering)
*
* @param componentName - Optional component name to use as the ID prefix.
* @returns A function that generates deterministic IDs. The function accepts an optional instanceName parameter.
*
* @example
* ```tsx
* const MyComponent = () => {
* const [deterministicId, setDeterministicId] = useState()
* const getId = useDeterministicId('MyComponent')
* useEffect(() => {
* setDeterministicId(getId())
* }, [])
* return <div id={deterministicId}>Content</div>
* }
* ```
*/
declare function useDeterministicId(componentName: string): (instanceName?: string) => string;
export default useDeterministicId;
export { useDeterministicId };
//# sourceMappingURL=useDeterministicId.d.ts.map