React-useragent React component

by React

react-useragent

Integrate user-agent detection in an idiomatic React way.

View demo Download Source

Installation

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

Introduction

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>
    <BeautifulIWindowsButton/>
  </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.

Usage

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>

GitHub