s-a / browserwall

A small, fast and rich-API browser/platform/engine detector for React.

React Browser Wall Component

This component is based on bowser so <BrowserWall /> property settings are defined here. <BrowserWallExit /> will render a default Browser not supported DOM but you can define your own children and provide a side entrance link.

Installation

npm i browserwall --save

Example 1

import {BrowserWall, BrowserWallExit} from 'browserwall'

const supportedBrowserTree = {
	chrome: '>86',
	firefox: '>80',
	edge: '>86'
}
const result = (
	<ErrorBoundary>
		<BrowserWall {...supportedBrowserTree}>
			<div className="App" valid="true">
				{this.state.user ? null : <Redirect to={`/login${redirectUri}`}></Redirect>}
				{this.renderApplicationCore()}
				<ToastContainer />
			</div>
			<BrowserWallExit />
		</BrowserWall>
	</ErrorBoundary>
)

Example 2

import {BrowserWall, BrowserWallExit} from 'browserwall'

const supportedBrowserTree = {
	chrome: '>86',
	firefox: '>80',
	edge: '>86'
}
const result = (
	<ErrorBoundary>
		<BrowserWall {...supportedBrowserTree} isValidBrowser={this.state.isValidBrowser}>
			<div className="App" valid="true">
				{this.state.user ? null : <Redirect to={`/login${redirectUri}`}></Redirect>}
				{this.renderApplicationCore()}
				<ToastContainer />
			</div>
			<BrowserWallExit>:O( <a href="#side-entrance" onClick={this.onSideEntranceClick.bind(this)}>I feel adventurous. I want to go in anyway.</a></BrowserWallExit>
		</BrowserWall>
	</ErrorBoundary>
)