react-ua

react-ua

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

Features

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

Try it live at StackBlitz

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

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

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

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

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

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

ReactDOMServer.renderToString(el);

License

MIT