Integrate user-agent detection in an idiomatic React way.
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"
...
}
Imagine being able to render magnificent, deep links, beautiful download buttons for your app. Well, Now you can.
<div>
<UserAgent ios>
<BeautifulIOSButton />
</UserAgent>
<UserAgent windows>
<BeautifulWindowsButton />
</UserAgent>
</div>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.
The most common question about this library is how to use it with Next.js. An example is available in an issue.
First you need to wrap your App in a <UserAgentProvider> tag.
You also need to pass a user agent string to <UserAgentProvider>.
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'].
import {UserAgentProvider} from '@quentin-sommer/react-useragent'
const App = props => (
<UserAgentProvider ua={window.navigator.userAgent}>
<div>{/* rest of your App */}</div>
</UserAgentProvider>
)Then use the <UserAgent> 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 <UserAgent>
- computer
- windows
- linux
- mac
- mobile
- tablet
- android
- ios
- firefox
- chrome
- edge
- safari
Theses props are cumulable : <UserAgent firefox mobile> will match both firefox browser and mobile systems.
import {UserAgentProvider, UserAgent} from '@quentin-sommer/react-useragent'
const App = props => (
<UserAgentProvider ua={window.navigator.userAgent}>
<div>
<UserAgent mobile>
<p>This will only be rendered on mobile</p>
</UserAgent>
</div>
</UserAgentProvider>
)You can also use this alternative API if you find it more convenient
<UserAgent mobile>
{uaIsMobile => (
{uaIsMobile && <p>This will ONLY be rendered on mobile</p>}
{!uaIsMobile && <p>This will NOT be rendered on mobile</p>}
)}
</UserAgent>For full power you can always access the underlying parser with the returnFullParser prop
<UserAgent returnFullParser>
{parser => (
<p>
I see you, {parser.getOS().name} {parser.getCPU().architecture}
</p>
)}
</UserAgent>You can also use the library with the useContext hook
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
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent