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

Features

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

Examples

• Example - Next.js - codesandbox container (sometimes containers are buggy, if so try this example)

Installation

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

Usage

import useSSR from 'use-ssr'

const App = () => {
  var { isBrowser, isServer, isNative } = useSSR()
  
  // Want array destructuring? You can do that too!
  var [isBrowser, isServer, isNative] = 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 ? '👍' : '👎')
  console.log('IS NATIVE: ', isNative ? '👍' : '👎')
  return (
    <>
      Is in browser? {isBrowser ? '👍' : '👎'}
      <br />
      Is on server? {isServer ? '👍' : '👎'}
      <br />
      Is react native? {isNative ? '👍' : '👎'}
    </>
  )
}

Options

const {
  isBrowser,
  isServer,
  isNative,
  device, // 'server', 'browser', or 'native'
  canUseWorkers,
  canUseEventListeners,
  canUseViewport,
} = useSSR()
// OR
const [
  isBrowser,
  isServer,
  isNative,
  device, // 'server', 'browser', or 'native'
  canUseWorkers,
  canUseEventListeners,
  canUseViewport,
] = useSSR()

Todos

• [ ] tests for array destructuring
• [ ] set up code climate test coverage
• [ ] add typescript array return types
• [ ] optimize badges see awesome badge list
  • [ ] add code climate test coverage badge
• [X] codesandbox examples
• [X] continuous integration
• [X] greenkeeper