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
147 Stars 13 Forks MIT License 330 Commits 12 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 521,711
JavaScr...
TypeScr...
nextjs
userage...
1 commit
# 113,978
C#
GitHub
c-sharp
nextjs
1 commit

next-useragent CircleCI

:warning: Version 2 of this library will work only with Next.js 9. If you're using Next.js 6-8 you can use previous versions. :warning:

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

npm

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

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

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

class IndexPage extends React.Component { render() { const { ua, useragent } = this.props

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

} }

export function getServerSideProps(context) { const ua = useUserAgent(context.req.headers['user-agent'])

return { props: { ua, useragent: ua.source } } }

export default withUserAgent(IndexPage)

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.