search

medipass / react-ugent

A headless React Component to conditionally render based on browser, device and OS.
44 stars 2 forks source link

Support except and/or a param as an object #1

Open thenickcox opened 6 years ago

thenickcox commented 6 years ago

This looks like a super helpful library, though it seems to work best on an opt-in basis. I need to render a component unless it's a mobile browser or for Mac OS. It'd be nice to be able to pass sometehing like an except parameter. It'd also be great for a param to be able to take an object, so:

<Ugent except={{ device: 'mobile', os='mac os' }}>
  <p> This will show on any os except Mac OS, and any device except mobile.</p>
</Ugent>

That potentially seems a little complicated, I realize.

thenickcox commented 6 years ago

I'm happy to talk through what you might accept as an API and submit a PR.

jxom commented 6 years ago

Hey @thenickcox, thanks for raising this - seems like a use-case that will pop up for a lot of people.

I like the implementation you mentioned above. I was thinking maybe the following would be a suitable approach:

<Ugent device="mobile" hideFor={{ os: 'ios' }}>
  <p>This will show on mobile devices that are not iOS.</p>
</Ugent>

What do you think?

thenickcox commented 6 years ago

@jxom I do like that. The feature I'd most want to start would be to be able to pass an array, though:

<Ugent device="desktop" hideFor={{ os: ["linux", "mac os"] }}>
  <p>This will only show on Windows.</p>
</Ugent>

Even to scale it back before tackling this feature, being able to pass an array to the browser key as you currently have it implemented, for example:

<Ugent browser={['safari', 'chrome']}>
  <p>This will show in Safari and Chrome, but not Firefox or IE (or whatever else).</p>
</Ugent>

That'd remove the need to have 2 identical Ugent blocks with different browser keys, so it'd reduce a lot of potential duplication.

jxom commented 6 years ago

Sounds great!