useSSR

The useSSR hook allows you to identify whether your code is running in a server-side or client-side environment. This is particularly useful for handling logic that should only execute in the browser, such as DOM manipulations or accessing browser-specific APIs.

Usage

First, you need to import the useSSR hook from the kitchn package.

import { useSSR } from "kitchn";

Example

Here is an example of how to use the useSSR hook in a component:

() => {
  const { isBrowser, isServer } = useSSR();

  return (
    <Container>
      <Text>Is this running in the browser? {isBrowser ? "Yes" : "No"}</Text>
      <Text>Is this running on the server? {isServer ? "Yes" : "No"}</Text>
    </Container>
  );
};

↓Code Editor

() => {
  const { isBrowser, isServer } = useSSR();

  return (
    <Container>
      <Text>Is this running in the browser? {isBrowser ? "Yes" : "No"}</Text>
      <Text>Is this running on the server? {isServer ? "Yes" : "No"}</Text>
    </Container>
  );
};

Parameters

The useSSR hook does not accept any parameters.

Return Value

The useSSR hook returns an object with the following properties:

Name	Type	Description
`isBrowser`	`boolean`	`true` if the code is running in the browser; `false` otherwise.
`isServer`	`boolean`	`true` if the code is running on the server; `false` otherwise.

useResize useTheme