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

import React from "react";
import { ClientOnly, useClientOnly } from "react-client-only";
 
const component = () => (
  <div>
    <p>This will render during SSR and on the client.</p>
    <ClientOnly>
      <p>This will render on the client only.</p>
    </ClientOnly>
  </div>
);
 
// or
 
const component2 = () => {
  const isOnClient = useClientOnly();
 
  if (!isOnClient) {
    return null;
  }
 
  return <p>This will render on the client only.</p>;
};

Install

# If you're using yarn 
yarn add react-client-only
 
# If you're npm 
npm install react-client-only