feat(react): add ClientOnly

.changeset/silver-teachers-tease.md

@@ -0,0 +1,5 @@
+---
+"@suspensive/react": minor
+---
+
+feat(react): add ClientOnly 

docs/suspensive.org/src/pages/docs/react/ClientOnly.en.mdx

@@ -0,0 +1,13 @@
+# ClientOnly
+
+This component renders children only in the client environment and renders the fallback on the server. You can set an appropriate fallback to enhance the user experience as needed.
+
+```tsx /fallback/
+import { ClientOnly } from '@suspensive/react'
+
+const Example = () => (
+  <ClientOnly fallback={<>Loading...</>}>
+    <div>This will only be rendered on the client side</div>
+  </ClientOnly>
+)
+```

docs/suspensive.org/src/pages/docs/react/ClientOnly.ko.mdx

@@ -0,0 +1,13 @@
+# ClientOnly
+
+이 컴포넌트는 클라이언트 환경에서만 children을 렌더링하며, 서버에서는 fallback을 렌더링합니다. 필요에 따라 적절한 fallback을 설정하여 사용자 경험을 향상할 수 있습니다.
+
+```tsx /fallback/
+import { ClientOnly } from '@suspensive/react'
+
+const Example = () => (
+  <ClientOnly fallback={<>로딩 중...</>}>
+    <div>클라이언트 환경에서만 렌더링됩니다</div>
+  </ClientOnly>
+)
+```

packages/react/src/components/ClientOnly.spec.tsx → packages/react/src/ClientOnly.spec.tsx

@@ -1,9 +1,9 @@
 import { render, screen } from '@testing-library/react'
 import { type Mock } from 'vitest'
-import { useIsClient } from '../hooks/useIsClient'
 import { ClientOnly } from './ClientOnly'
+import { useIsClient } from './hooks/useIsClient'
 
-vi.mock('../hooks/useIsClient', () => ({
+vi.mock('./hooks/useIsClient', () => ({
   useIsClient: vi.fn(),
 }))
 

packages/react/src/components/ClientOnly.tsx → packages/react/src/ClientOnly.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
-import { useIsClient } from '../hooks'
+import { useIsClient } from './hooks'
 
-interface ClientOnlyProps {
+export interface ClientOnlyProps {
   children: ReactNode
   fallback?: ReactNode
 }

packages/react/src/index.ts

@@ -5,8 +5,10 @@ export { ErrorBoundaryGroup, useErrorBoundaryGroup } from './ErrorBoundaryGroup'
 export { Delay } from './Delay'
 export { wrap } from './wrap'
 export { DevMode } from './DevMode'
+export { ClientOnly } from './ClientOnly'
 
 export type { SuspenseProps } from './Suspense'
 export type { ErrorBoundaryProps, ErrorBoundaryFallbackProps } from './ErrorBoundary'
 export type { ErrorBoundaryGroupProps } from './ErrorBoundaryGroup'
 export type { DelayProps } from './Delay'
+export type { ClientOnlyProps } from './ClientOnly'

packages/react/src/utils/defineSuspense.tsx

@@ -1,5 +1,5 @@
 import { Suspense, type SuspenseProps } from 'react'
-import { ClientOnly } from '../components/ClientOnly'
+import { ClientOnly } from '../ClientOnly'
 
 export const SuspenseClientOnly = (props: SuspenseProps) => (
   <ClientOnly fallback={props.fallback}>