Need help with next-useragent?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

tokuda109
258 Stars 15 Forks MIT License 409 Commits 1 Opened issues

Description

next-useragent parses browser user-agent strings for next.js

Services available

!
?

Need anything else?

Contributors list

next-useragent

next-useragent
parses browser user-agent strings for next.js.

Installation

$ npm install next-useragent

Usage

next-useragent
is simple to use.
Give access to user-agent details anywhere using
withUserAgent
method.
  • Passed as an argument of getInitialProps method.
  • Passed as property of React component.

HOCs

import React from 'react'
import dynamic from 'next/dynamic'
import { WithUserAgentProps, withUserAgent } from 'next-useragent'

const DesktopContent = dynamic(() => import('./desktop-content')) const MobileContent = dynamic(() => import('./mobile-content'))

class IndexPage extends React.Component {

static async getInitialProps(ctx) { return { useragent: ctx.ua.source } }

render() { const { ua, useragent } = this.props

return (
  <>
    <p>{ useragent }</p>
    { ua.isMobile ? (
    <mobilecontent></mobilecontent>
    ) : (
    <desktopcontent></desktopcontent>
    ) }
  &gt;
)

} }

export default withUserAgent(IndexPage)

Hooks

The

useUserAgent
returns
UserAgent
instance.
import React from 'react'
import dynamic from 'next/dynamic'
import { useUserAgent } from 'next-useragent'

const DesktopContent = dynamic(() => import('./desktop-content')) const MobileContent = dynamic(() => import('./mobile-content'))

export default props => { let ua; if (props.uaString) { ua = useUserAgent(props.uaString) } else { ua = useUserAgent(window.navigator.userAgent) }

return (

{ ua.source }

{ ua.isMobile ? ( ) : ( ) }
) }

export function getServerSideProps(context) { return { props: { uaString: context.req.headers['user-agent'] } } }

Parse function

The

parse
returns
UserAgent
instance.

This works on server side and inside conditions without ESLint throwing errors

import React from 'react'
import dynamic from 'next/dynamic'
import { parse } from 'next-useragent'

const DesktopContent = dynamic(() => import('./desktop-content')) const MobileContent = dynamic(() => import('./mobile-content'))

export default props => { let ua; if (props.uaString) { ua = parse(props.uaString) } else { ua = parse(window.navigator.userAgent) }

return (

{ ua.source }

{ ua.isMobile ? ( ) : ( ) }
) }

export function getServerSideProps(context) { return { props: { uaString: context.req.headers['user-agent'] } } }

parsed objects

The parsed objects looks like the following:

{
  source: 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A365 Safari/600.1.4',
  deviceType: 'mobile',
  deviceVendor: 'Apple',
  os: 'iOS',
  osVersion: 8,
  browser: 'Mobile Safari',
  browserVersion: 8,
  isIphone: true,
  isIpad: false,
  isMobile: true,
  isTablet: false,
  isDesktop: false,
  isChrome: false,
  isFirefox: false,
  isSafari: true,
  isIE: false,
  isMac: false,
  isChromeOS: false,
  isWindows: false,
  isIos: false,
  isAndroid: false,
  isBot: false
}

License

next-useragent
is licensed under MIT License.
See LICENSE for more information.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.