1.0.1 • Published 6 years ago
react-ugent v1.0.1
React Ugent
A headless React Component to identify browser, device and OS. Built with ua-parser-js.
Table of Contents
Installation
npm install react-ugent --save
or install with Yarn if you prefer:
yarn add react-ugent
Usage
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" 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
browser
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
device
string
| Optional
Render the child for a given device.
Available devices are:
console, computer, mobile, tablet, smarttv, wearable, embedded
os
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
parsedUserAgent
Object({ browser, device, os })
userAgent
string