Detect browser, and render view according to the detected browser type

import {
	SafariView,
	ChromeView,
	OperaView,
	EdgeView,
	FirefoxView,
	YandexView,
	OtherView,
} from "react-browser-detector";

<>
	<SafariView>
		<h1>This is rendered only in Safari</h1>
	</SafariView>
	<ChromeView>
		<h1>This is rendered only in Chrome</h1>
	</ChromeView>
	<OperaView>
		<h1>This is rendered only in Opera</h1>
	</OperaView>
	<EdgeView>
		<h1>This is rendered only in Edge</h1>
	</EdgeView>
	<FirefoxView>
		<h1>This is rendered only in Firefox</h1>
	</FirefoxView>
	<YandexView>
		<h1>This is rendered only in Yandex Browser</h1>
	</YandexView>
	<OtherView>
		<h1>This content is rendered only in other browsers</h1>
	</OtherView>
</>

import { BrowserDetector } from 'react-browser-detector';

function App() {
  renderContent = () => {
    if (BrowserDetector('Safari')) {
      return <div> This content is available only in Safari</div>
    }
    return <div> ...content </div>
  }

  render() {
    return this.renderContent();
  }
}

<SafariView className="custom-class">
	<p>View content</p>
</SafariView>

<SafariView
	style={{
		background: "red",
		fontSize: "24px",
		lineHeight: "2",
	}}
>
	<p>View content</p>
</SafariView>