use-ssr

useSSR

☯️ React hook to determine if you are on the server or browser

Need to know when you're on the server or in the browser in your components? This simple hook makes it easy. 🔥

Features

• SSR (server side rendering) support
• TypeScript support
• Zero dependencies

Examples

• Example 1 - Next.js (if not working -- codesandbox containers are buggy)
• Example 2 - Next.js

Installation

yarn add use-ssr      or     npm i -S use-ssr

Usage

const App = () => {
  const { isBrowser, isServer } = useSSR()
  /*
   * In your browser's chrome devtools console you should see
   * > IS BROWSER: 👍
   * > IS SERVER: 👎
   *
   * AND, in your terminal where your server is running you should see
   * > IS BROWSER: 👎
   * > IS SERVER: 👍
   */
  console.log('IS BROWSER: ', isBrowser ? '👍' : '👎')
  console.log('IS SERVER: ', isServer ? '👍' : '👎')
  return (
    <>
      Is in browser? {isBrowser ? '👍' : '👎'}
      <br />
      Is on server? {isServer ? '👍' : '👎'}
    </>
  )
}

Options

const {
  isBrowser,
  isServer,
  canUseWorkers,
  canUseEventListeners,
  canUseViewport,
} = useSSR()

Todos

• codesandbox examples
• tests
• badges