[ADD] useId hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useId/useId.md

@@ -37,7 +37,8 @@ export const COMPONENTS = [
 			"useMemoDeepCompare",
 			"useCallbackCompare",
 			"useCallbackDeepCompare",
-			"useLazyRef"
+			"useLazyRef",
+			"useId"
 		],
 		//EVENTS
 		[

apps/react-tools-demo/src/constants/components.ts

@@ -0,0 +1,19 @@
+# useId
+_useId_ hook polyfilled for React versions below 18: __not use for key prop__.
+
+## API
+
+```tsx
+useId() 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> 
+> - _string_  
+>

apps/react-tools-demo/src/markdown/useId.md

@@ -1,5 +1,5 @@
 # useSyncExternalStore
-_useSyncExternalStore_ polyfilled for React versions below 18 ___only client side___.
+_useSyncExternalStore_ hook polyfilled for React versions below 18 ___only client side___.
 
 ## API
 

apps/react-tools-demo/src/markdown/useSyncExternalStore.md

@@ -36,6 +36,7 @@
 	- [x] useMemoCompare
 	- [x] useMemoDeepCompare
 	- [x] useLazyRef
+	- [x] useId
 
 - __EVENTS__
 	- [x] useEvents
@@ -71,7 +72,6 @@
 	- [x] useMediaQuery
 	- [x] useColorScheme
 	- [x] useTitle (change document.title but also document.head.title nodeElement)
-	- [ ] useId (polyfill???)
 	- [ ] useNetwork
 	- [ ] useOnline
 	- [ ] useFullscreen (check browser compatibility)

packages/react-tools/README.md

@@ -0,0 +1,18 @@
+import { useId as legacy } from "react"
+import { useLazyRef } from ".";
+
+let count = 0;
+const increment = () => {
+	return `:${(count++).toString(32)}:`;
+}
+
+/**
+ * __`useId`__: _useId_ hook polyfilled for React versions below 18: __not use for key prop__.
+ * @returns {string}
+ */
+function useIdPolyfilled(): string {
+	const id = useLazyRef(increment);
+	return id.current;
+}
+
+export const useId = legacy === undefined ? useIdPolyfilled : legacy;

packages/react-tools/src/hooks/useId.ts

@@ -1,7 +1,7 @@
 import { useSyncExternalStore as legacy, useCallback, useEffect, useRef, useState } from 'react';
 
 /**
- * __`useSyncExternalStore`__: _useSyncExternalStore_ polyfilled for React versions below 18 ___only client side___.
+ * __`useSyncExternalStore`__: _useSyncExternalStore_ hook polyfilled for React versions below 18 ___only client side___.
  * @param {(onStoreChange: () => void) => ()=>void} subscribe - function to register a callback that is called whenever the store changes.
  * @param {()=>Snapshot} getSnapshot - function that returns the current value of the store.
  * @returns {Snapshot} result - state