antonybudianto/react-ua

📱React User Agent Component, Hook, and HOC. SSR-ready, full UT, using new React Context and Hooks API

react-ua

React User Agent Component and Provider, SSR-ready, using new React Context API

Requirement

• React 16.8.0

Features

• Wrapper for ua-parser-js
• Using new React Hooks API
• Using new React Context API
• SSR-ready
• Unit-tested

Try it live at StackBlitz

import React from 'react';
import { UserAgentProvider, useUserAgent } from 'react-ua';

const Comp = () => {
  const ua = useUserAgent();
  return <div>OS: {ua.os.name}</div>;
};

const App = () => (
  <UserAgentProvider>
    <Comp />
  </UserAgentProvider>
);

ReactDOM.render(<App />, document.getElementById('#root'));

// SSR
const el = (
  <UserAgentProvider value={request.headers['user-agent']}>
    <Comp />
  </UserAgentProvider>
);

ReactDOMServer.renderToString(el);

HOC (deprecated)

import { withUserAgent } from 'react-ua/hoc';

const CompWithHoc = withUserAgent(({ ua }) => <div>OS: {ua.os.name}</div>);

const App = () => (
  <UserAgentProvider>
    <CompWithHoc />
  </UserAgentProvider>
);

License

MIT

react-ua's Issues

Self remind: Move UA init to state

Using with getServerSideProps

When using getServerSideProps throws "You can not use getInitialProps with getServerSideProps"

I recently switched a few pages to getServerSideProps, but only one has withUserAgent. I'd like to use getServerSideProps on all of them, but it's currently impossible with this setup.

To Reproduce

Steps to reproduce the behavior:

1. Switch to getServerSideProps
2. Wrap with withUserAgent
3. Try to render a page

Expected behavior

It should detect if you're using getServerSideProps

Could not find a declaration file for module 'react-ua'

Hi.

I have tried using react-ua and get this error

Could not find a declaration file for module 'react-ua'. '/path/to/node_modules/react-ua/dist/react-ua.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/react-ua` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-ua';`ts(7016)

running npm i --save-dev @types/react-ua did not help.

Any way of get the library working?

My environment:

    "react": "^18.2.0",
    "react-ua": "^4.0.0",

Thanks for advice or a fix

add simple isMobile boolean to ua object

it would be great to have a simple boolean to check if it's a computer, or a mobile