react-client-only

This package provides a utility component and a React hook for only rendering React components in the browser, but not during server-side rendering.

This is useful for static-side generation when trying to avoid rehydration issues, e.g. for components dependent on the current user.

Inspired & based on the examples in this blog post.

Usage

``tsx
import React from "react";
import { ClientOnly, useClientOnly } from "react-client-only";

const component = () => (


);

// or

const component2 = () => {
const isOnClient = useClientOnly();

if (!isOnClient) {
return null;
}

return

This will render on the client only.

;
};
`

Install

`sh


If you're using yarn

yarn add react-client-only

If you're npm

npm install react-client-only
``