react-browser-support-copy v1.6.0

react-browser-support-copy

• add BrowserSupport component to your app as element
• make BrowserSupport component a higher order component

Installation

npm install react-browser-support-copy --save-dev

Component

This component displays a message, if the current browser is not supported. This is determined using a list of supportedBrowsers ( a javascript object). Supported Browsers are specified as an Object to the list prop of <BrowserSupport supported={minBrowserVersions}>.

API

Note: unsupportedComponent prop will disable the following prop showDownloadLinks, style and className

Basic

You can use the default <BrowserSupport /> component.

import React from 'react'
import BrowserSupport from 'react-browser-support-copy'

const minBrowserVersions = {
    'ios-webview': '605',
    chrome: '60',
    crios: '60',
    edge: '13',
    facebook: '188',
    firefox: '60',
    fxios: '12',
    ie: '10',
    ios: '10',
    opera: '10',
    safari: '10'
}

export default class MyComponent extends React.Component {
    componentDidMount() {
        this.setState({ browser: detectBrowser() })
    }
    render() {
        return (
            //...
            <BrowserSupport config={minBrowserVersions}/>
            //...
        )
    }
}

Custom

You can apply your own style, className & children as props to the component, and it will use those in place of the defaults.

render() {
    return this.state ? (
        <div>
        {/* With Custom Content */}
        <BrowserSupport
            config={minBrowserVersions}
            className='custom-warning-style'
        />

        {/* With Custom Content & Browser Version, etc. */}
        <BrowserSupport
            config={minBrowserVersions}
            style={yourCustomStyles}>
            <b>
                {this.state.browser.name} (version: {this.state.browser.version}) unsupported
            </b> 
            <div>
                oh my goodness, we don't seem to support your browser 😳
            </div>
            <div style={{display: 'flex', flexDirection: 'column', marginTop: '1em'}}>
                <a href='https://www.google.com/chrome/browser/desktop/index.html'>Download Chrome</a>
                <a href='https://www.mozilla.org/en-US/firefox/new/'>Download Firefox</a>
                <a href='https://safari.en.softonic.com/mac/download'>Download Safari</a>
            </div>
        </BrowserSupport>
    </div>
    ) : null
}

NOTE: If you are using chrome, you can test this with the User-Agent Switcher for Chrome extension.

Higher Order Component

This is a higher order component which wraps your app and detect if your browser is supported or not. This will not allow users to browse your app if their browser is unsupported.

/**
*
* App
*
*/

import React from 'react'
import BrowserCheck from 'components/BrowserCheck'

export function App () {
  return (
    <div>
      My Main App
    </div>
  )
}

export default BrowserCheck(App)

/**
*
* BrowserCheck
*
*/

import React from 'react'
import BrowserSupport, { highOrderComponent } from 'react-browser-support-copy'

export default function BrowserCheck (Component) {
    const TestComponent = (props) => {
        console.log('props', props)
        return (
            <div>My Custom Unsupported Component</div>
        )
    }

  class BrowserCheckComponent extends React.Component {
    state = {
      browser: {}
    }

    handleScanBrowser= data => this.setState({browser: data})

    render () {
      const { supported } = this.state.browser
      const minBrowserVersion = {
        'ios-webview': '605',
        chrome: '60',
        crios: '60',
        edge: '13',
        facebook: '188',
        firefox: '60',
        fxios: '12',
        ie: '10',
        ios: '10',
        opera: '10',
        safari: '10'
      }

      return (
            <div>
                <BrowserSupport
                    config={minBrowserVersions}
                    showDownloadLinks // this will show suggested download links for user's browser
                    unsupportedComponent={(props) => <TestComponent key='component' {...props} />} // this will show your custom component if the browser is unsupported
                    appComponent={'<Component />'} // this is for higher component order method only
                    showBoth // this will show both unsupported and your app component
                />
            </div>
        )
    }
  }

  return BrowserCheckComponent
}

Acknowledgement: This package is originally developed by Bilo Lwabona