react-useragent

Integrate user-agent detection in an idiomatic React way.

Installation

yarn add @quentin-sommer/react-useragent or npm i -s @quentin-sommer/react-useragent

For React 15 (old context) use the 2.x version

``
// React 15
"dependencies": {
...
"@quentin-sommer/react-useragent": "^2.0.0"
...
}
`

Introduction

Imagine being able to render magnificent, deep links, beautiful download buttons for your app. Well, Now you can.

`js



`

react-useragent wraps the great UAParser.js library and make it easy to use useragent knowledge inside your React applications.
react-useragent provides useful shortcuts but you can always use an escape hatch in case you want to access the underlying library.

live demo

Usage

$3

The most common question about this library is how to use it with Next.js. An example is available in an issue.

$3

First you need to wrap your App in a tag.
You also need to pass a user agent string to .
On the browser that would be window.navigator.userAgent.

react-useragent works in server side rendering as well, just pass it the request useragent string. On express that would be req.headers['user-agent'].

`js
import {UserAgentProvider} from '@quentin-sommer/react-useragent'

const App = props => (



{/ rest of your App /}



)
`

Then use the component.

react-useragent expose some props, these are optimized and using them will be faster than directly accessing the UAParser.js library.

Available props for

- computer
- windows
- linux
- mac
- mobile
- tablet
- android
- ios
- firefox
- chrome
- edge
- safari

Theses props are cumulable : will match both firefox browser and mobile systems.

`js
import {UserAgentProvider, UserAgent} from '@quentin-sommer/react-useragent'

const App = props => (



This will only be rendered on mobile



)
`

You can also use this alternative API if you find it more convenient

`js

{uaIsMobile => (
{uaIsMobile &&

This will ONLY be rendered on mobile

}
{!uaIsMobile &&

This will NOT be rendered on mobile

}
)}

`

For full power you can always access the underlying parser with the returnFullParser prop

`js

{parser => (



I see you, {parser.getOS().name} {parser.getCPU().architecture}



)}

`

You can also use the library with the useContext hook

`js
import {UAContext} from '@quentin-sommer/react-useragent'
const UsingContextHook = () => {
const {uaResults, parser} = useContext(UAContext)
return parser.getOS().name
}
``

For more example see the demo app source here

If you have any questions don't hesitate to say hi on Twitter