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:
Is this running in the browser? Yes
Is this running on the server? No
Code Editor
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. |
Last updated on