useSSR
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 - Next.js - codesandbox container (sometimes containers are buggy, if so try this example)
Installation
yarn add use-ssr or npm i -S use-ssrUsage
import useSSR from 'use-ssr' const App = () => { var { isBrowser, isServer } = useSSR() // Want array destructuring? You can do that too! var [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() // OR const [ isBrowser, isServer, canUseWorkers, canUseEventListeners, canUseViewport, ] = useSSR()Todos
- tests
- set up code climate test coverage
- add typescript array return types
- optimize badges see awesome badge list
- add code climate test coverage badge
- codesandbox examples
- continuous integration
- greenkeeper
