Export simple boolean or object about react-useragent HOT 14 CLOSED

yea, okay. Thanks for this library anyway. I will close the issue :)

from react-useragent.

Hi,

Could you try to explain exactly what do you want to achieve and why you would need a different api? Maybe I will be able to help you using the current API or brainstorm potential improvements!

Best

from react-useragent.

yea, of course. So I am using this library on the server side to detect which nav bar i need to render. the easiest way for me would be to just have a

isMobile ? <MobileNav/> : <StandardNav/>

right now I use it like this:

<Useragent mobile>
<MobileNav/>
</UserAgent>
<Useragent computer>
<StandardNav/>
</Useragent>

First up I am not sure if this covers all cases (if it falls back to computer) or not, second of all I would still like to display the mobilenav, when the user agen can not be detected, but I am on the client side and can do it based on the devices width

from react-useragent.

I see, would the function as a child api work for you?

<UserAgent mobile>
    {isMobile => (
        {isMobile && <p>This will ONLY be rendered on mobile</p>}
        {!isMobile && <p>This will NOT be rendered on mobile</p>}
    )}
</UserAgent>

from react-useragent.

afaik that is already possible, right? The cleanest solution would be to just import a boolean, but I guess I can work with that

from react-useragent.

Yep, this already exists. The thing is the value lives inside the React context: it's only created after the UserAgentProvider component exists. If you were to call a method / read a boolean directly from the module like this:

import {isMobile} from 'UserAgentProvider'

You would have no guarantee that it's initalized.

If you really want to bail out of React's abstraction you could use the ua-parser-js yourself and initialize it by hand at the start of your app:

// uaParser.js

let uaParser

export function init(uaString) {
 uaParser = new UAParser(uaString)
}

export function isMobile() {
  uaParser.getDevice().type === 'mobile'
}

But then you would defeat all the purpose of React encapsulation model

from react-useragent.

I just found this library: https://github.com/antonybudianto/react-ua. They solve it using a HOC

from react-useragent.

I don't see any difference between the 2 libraries 🤔

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

is roughly the same as

<UserAgent returnFullParser>
    {parser => (
      <p>I see you, {parser.getOS().name} {parser.getCPU().architecture}</p>
    )}
</UserAgent>

from react-useragent.

for me the above is a bit cleaner, as I just have the boolean. I can also use it outside of the JSX

from react-useragent.

I still don't see it sorry, this 2 examples are identical:

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

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

You will only have access to the ua object when the components get rendered by React in both cases

from react-useragent.

in the above example it's pretty much the same I agree, but what about:

const CompWithHoc = withUserAgent(({ ua }) => {

const someFunc = () => (
ua.device.type === 'mobile ? 'one thing' : 'the other'
)

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

from react-useragent.

someFunc is only usable inside it's closure, still not difference with just doing logic on ua directly for me... I think you're misunderstanding the hoc pattern, the callback is only called when the component is rendered, not before

from react-useragent.

for me it is, because for example this case:

const Component ({ ua }) => {

const handleSubmit = () => {
sendPOSTRequest('http:/wwww...', {name: 'xxx', fromMobile: ua.device.type === 'mobile'})
}

return (
	<form onSubmit={handleSubmit}>
		<input />
	</form>
	)
}

this is also possible with render props, but it's not as clean

from react-useragent.

You can achieve exactly this with 2 more lines using this library:

const Component = () => (
  <UserAgent returnFullParser>
    {ua => {
      const handleSubmit = () => {
        sendPOSTRequest('http:/wwww...', {
          name: 'xxx',
          fromMobile: ua.device.type === 'mobile',
        })
      }

      return (
        <form onSubmit={handleSubmit}>
          <input />
        </form>
      )
    }}
  </UserAgent>
)

Sorry but I don't want complexify the API just to save 2 lines.
Let me know if I you have any other questions

from react-useragent.