use-device-options
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

useDeviceOptions

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

Installation

yarn add use-device-options      or     npm i -S use-device-options

Usage

import useDeviceOptions from 'use-device-options'
 
const App = () => {
  var { isBrowser, isServer, isNative } = useDeviceOptions()
  
  
  /*
   * 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,
= useDeviceOptions()

Package Sidebar

Install

npm i use-device-options

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

7.02 kB

Total Files

6

Last publish

Collaborators

  • 14h