Skip to content

useIsClient

Custom hook that determines if the code is running on the client side (in the browser).

Usage

tsx
import { useIsClient } from 'vhooks'

export default function Component() {
  const isClient = useIsClient()

  return <div>{isClient ? 'Client' : 'server'}</div>
}

Installation

sh
pnpm dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsClient.json -e %src%/hooks
sh
npx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsClient.json -e %src%/hooks
sh
bunx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsClient.json -e %src%/hooks
sh
yarn dlx scaflo@latest https://raw.githubusercontent.com/programming-with-ia/vDocs/scaflos/hooks/useIsClient.json -e %src%/hooks

API

useIsClient(): boolean

Custom hook that determines if the code is running on the client side (in the browser).

Returns

boolean

A boolean value indicating whether the code is running on the client side.

Hook

ts
import { useEffect, useState } from 'react'

export function useIsClient() {
  const [isClient, setClient] = useState(false)

  useEffect(() => {
    setClient(true)
  }, [])

  return isClient
}

vDocs