useIsClient

The useIsClient hook is helpful when you want to know whether the whether the component was running on client side or not.

It is useful when you want to create gate-keeping components like <ClientOnly/> which ensures a component renders only on client, even when page is SSR’ed.

useIsClient

Isomorphic

Client Only

Try refreshing the page to see the client only component render after a delay.

Usage

Import the hook from @abhushanaj/react-hooks and use in required component.

./src/ClientOnly.tsx

import { useIsClient } from '@abhushanaj/react-hooks';

function ClientOnly(props) {
  const isClient = useIsClient();
  return isClient ? props.children : null;
}

export default ClientOnly;

API Reference

Return Value

Parameter	Type	Description	Default
isClient	boolean	Whether or not the it is client-side environment.	N/A