react-kino
Hooks

useIsClient

SSR guard that returns false on the server and true after mount.

Overview

useIsClient() is an SSR guard. Returns false on the server and during hydration, true after the component mounts on the client.

Usage

import { useIsClient } from "react-kino";
 
function SafeComponent() {
  const isClient = useIsClient();
  if (!isClient) return <div>Loading...</div>;
  return <div>Window width: {window.innerWidth}</div>;
}

Returns

TypeDescription
booleanfalse on server / during hydration, true after client mount

When to use

Use useIsClient() when you need to access browser-only APIs (window, document, navigator) that are not available during server-side rendering.

react-kino's built-in components already handle SSR safety internally, so you typically only need this hook when building custom scroll-driven components.

Example: Conditional rendering

import { useIsClient } from "react-kino";
 
function WindowSize() {
  const isClient = useIsClient();
 
  if (!isClient) {
    return <span>--</span>;
  }
 
  return (
    <span>
      {window.innerWidth} x {window.innerHeight}
    </span>
  );
}

Previous

useKino

On this page