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

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

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

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

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

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

ReactDOMServer.renderToString(el);