Helpers to only render React components in a browser (not SSR)
npm install react-client-onlyThis 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.
``tsx
import React from "react";
import { ClientOnly, useClientOnly } from "react-client-only";
const component = () => (
This will render during SSR and on the client.
This will render on the client only.
// 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-onlyIf you're npm
npm install react-client-only
``