Is Client

Docs

Is Client

Determine whether the code is running on the client-side or server-side

About

The useIsClient hook determines if it’s safe to run client-only hooks, like useMediaQuery or useLocalStorage. It returns a boolean indicating whether React’s useEffect hook has completed, confirming the app is being rendered on the client and it’s safe to use browser-specific APIs.

Return Values

Name	Type	Description
isClient	boolean	`true` if running in a client-side environment, `false` otherwise.

Installation

Run the following command:

npx scriptkavi-hooks@latest add is-client

Usage

import { useIsClient } from "@/hooks/is-client"

import * as React from "react"
 
export default function App() {
  const isClient = useIsClient()
 
  return (
    <section>
      <h1>useIsClient</h1>
      <h6>Is Client? </h6>
      <p>{isClient ? "If you can see this ... you already know" : "No"}</p>
    </section>
  )
}

Intersection Observer Is First Render