A headless React Component to conditionally render based on browser, device and OS. Built with ua-parser-js.
npm install react-ugent --save
or install with Yarn if you prefer:
yarn add react-ugent
import React from 'react';
import Ugent from 'react-ugent';
export default () => (
<div>
<Ugent browser="chrome">
<div>
This text only shows on Chrome
</div>
</Ugent>
<Ugent browser="chrome">
{({ userAgent }) =>
<div>
This text only shows on Chrome. User agent: {userAgent}
</div>
}
</Ugent>
<Ugent browser="chrome" device="mobile">
<div>
This text only shows on Chrome on mobile devices
</div>
</Ugent>
<Ugent browser="safari" os="ios">
<div>
This text only shows on Safari on iOS.
</div>
</Ugent>
<Ugent browser="ie" os="windows">
<div>
This text only shows on IE on Windows.
</div>
</Ugent>
</div>
);
<Ugent>
Props
string
| Optional
Render the child for a given browser.
Available browsers are:
chrome, chromium, edge, firefox, ie, lynx, safari, opera
View all the available browser values here
string
| Optional
Render the child for a given device.
Available devices are:
console, computer, mobile, tablet, smarttv, wearable, embedded
string
| Optional
Render the child for a given OS.
Available OS are:
android, blackberry, chromium os, debian, ios, linux, mac os, ubuntu, unix, windows
View all the available OS values here
children
Render Props
Object({ browser: { name, version }, device: { model, type, vendor }, os: { name, version } })
string