tokuda109 / Next Useragent
Licence: mit
next-useragent parses browser user-agent strings for next.js
Stars: ✭ 158
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Next Useragent
Nextjs Docker Pm2 Nginx
Next.js with Docker, PM2 and NGINX
Stars: ✭ 139 (-12.03%)
Mutual labels: nextjs
Example Frontend Next Js
An example of a Sanity powered frontend using Next.js
Stars: ✭ 140 (-11.39%)
Mutual labels: nextjs
Next Nprogress
Next.js HOC to integrate NProgress inside your app
Stars: ✭ 145 (-8.23%)
Mutual labels: nextjs
Nextjs Express Mongoose Crudify Boilerplate
Next.js (React) + Redux + Express REST API + MongoDB + Mongoose-Crudify boilerplate
Stars: ✭ 148 (-6.33%)
Mutual labels: nextjs
Next Runtime Dotenv
Expose environment variables to the runtime config of Next.js
Stars: ✭ 136 (-13.92%)
Mutual labels: nextjs
Next Secure Headers
Sets secure response headers for Next.js.
Stars: ✭ 156 (-1.27%)
Mutual labels: nextjs
Nextjs Dynamic Routes
[Deprecated] Super simple way to create dynamic routes with Next.js
Stars: ✭ 145 (-8.23%)
Mutual labels: nextjs
Notus Nextjs
Notus NextJS: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 152 (-3.8%)
Mutual labels: nextjs
Nextjs Material Kit
NextJS version of Material Kit React by Creative Tim
Stars: ✭ 141 (-10.76%)
Mutual labels: nextjs
Strapi Starter Next Corporate
Next.js starter for creating a corporate site with Strapi.
Stars: ✭ 145 (-8.23%)
Mutual labels: nextjs
Notion Blog
A Next.js site using new SSG support with a Notion backed blog
Stars: ✭ 2,339 (+1380.38%)
Mutual labels: nextjs
Next Firebase Auth
Simple Firebase authentication for all Next.js rendering strategies
Stars: ✭ 135 (-14.56%)
Mutual labels: nextjs
Serverless Next.js
⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
Stars: ✭ 2,977 (+1784.18%)
Mutual labels: nextjs
Shadow Useragent
Pick the most common user-agents on the Internet 👻
Stars: ✭ 147 (-6.96%)
Mutual labels: useragent
Next Apollo Auth
Authentication Boilerplate with Next.js and Apollo GraphQL
Stars: ✭ 159 (+0.63%)
Mutual labels: nextjs
Actions Gh Pages
GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.
Stars: ✭ 2,576 (+1530.38%)
Mutual labels: nextjs
Next Graphql Blog
🖊 A Blog including a server and a client. Server is built with Node, Express & a customized GraphQL-yoga server. Client is built with React, Next js & Apollo client.
Stars: ✭ 152 (-3.8%)
Mutual labels: nextjs
next-useragent
⚠️ 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. ⚠️
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<WithUserAgentProps> {
static async getInitialProps(ctx) {
return { useragent: ctx.ua.source }
}
render() {
const { ua, useragent } = this.props
return (
<>
<p>{ useragent }</p>
{ ua.isMobile ? (
<MobileContent />
) : (
<DesktopContent />
) }
</>
)
}
}
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<WithUserAgentProps> {
render() {
const { ua, useragent } = this.props
return (
<>
<p>{ useragent }</p>
{ ua.isMobile ? (
<MobileContent />
) : (
<DesktopContent />
) }
</>
)
}
}
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].