React Browser Support

A simple React hook to render contents based on browser support. TypeScript ready.

Requirements

• React v16.8+

Install

yarn add @digitalrelab/react-browser-support

or

npm install @digitalrelab/react-browser-support

Quick start

import { useBrowserSupport } from "@digitalrelab/react-browser-support"

export const App: React.FC = () => {
  const isBrowserSupported = useBrowserSupport({ ie: false })

  // Will render for IE only.
  if (!isBrowserSupported) {
    return <div>Friends don't let friends use IE.</div>
  }

  return <div>Oh yeah, your browser is great!</div>
}

In depth

useBrowserSupport(browsersRules: TBrowsersRules): boolean

This method returns true when current browser is actually supported. false otherwise.

What are browsersRules?

The keys of browsersRules are equivalent to a browsers' names. Their values can be whether it's disabled or not (false or true), or the minimum version to run on that browser. i.e.

useBrowserSupport({ ie: false, chrome: 48 })

The above means that all IE versions are disabled, and Chrome requires version higher than 48.

Browsers available

• chrome
• ie
• firefox
• safari
• opera
• edge

License

Brought to you by DigitalReLab, LLC. MIT.