feat: add useId

packages/core/index.ts

@@ -42,5 +42,5 @@ export * from './useIdle'
 export * from './useIsomorphicEffect'
 export * from './useEyeDropper'
 export * from './useValidatedState'
-
+export * from './useId'
 export * from '@rcuse/shared'

packages/core/useId/__tests__/index.test.ts

@@ -0,0 +1,21 @@
+import { renderHook } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useId } from '../index'
+
+describe('useId', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  it('returns static id', () => {
+    const view = renderHook(() => useId('test-id'))
+    expect(view.result.current).toBe('test-id')
+  })
+
+  it('returns random id if static id is not provided', () => {
+    const view = renderHook(() => useId())
+    expect(typeof view.result.current).toBe('string')
+    expect(view.result.current.includes('rcuse')).toBe(true)
+    expect(view.result.current !== renderHook(() => useId()).result.current).toBe(true)
+  })
+})

packages/core/useId/index.ts

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+import { useLayoutEffect } from '../helpers/useLayoutEffect'
+import { useReactId } from './useReactId'
+
+let count = 0
+
+export function useId(staticId?: string) {
+  const reactId = useReactId()
+  const [id, setId] = useState(reactId)
+
+  useLayoutEffect(() => {
+    if (!staticId)
+      setId((reactId: string) => reactId ?? String(count++))
+  }, [])
+
+  return staticId || (id ? `rcuse-${id}` : '')
+}

packages/core/useId/useReactId.ts

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const useReactId = (React as any)['useId'.toString()] || (() => undefined)