search

flexdinesh / react-socks

🎉 React library to render components only on specific viewports 🔥
MIT License
426 stars 29 forks source link

We could use `matchMedia` to pass in custom media queries #8

Closed flexdinesh closed 5 years ago

flexdinesh commented 6 years ago

We could make use of matchMedia to pass in custom media queries

A syntax like this would be really convenient

<Breakpoint customQuery={'(min-width: 400px)'}>
  <div>I will render only in mobile devices</div>
</Breakpoint>
Entkenntnis commented 5 years ago

Using #17 you can write your own logic.

flexdinesh commented 5 years ago

@dbryantm Since you mentioned in the other issue that you're interested in new things in this lib, we've been meaning to add this feature for a while. Would be super interesting if this lib could accept breakpoints on the fly and render based on it.

dbryantm commented 5 years ago

@flexdinesh sure, I can try and take a look at this. So if I have this correct, you want it only to take effect when there's no breakpoint modifiers like <Breakpoint sm down/> otherwise they will supersede the customQuery?

flexdinesh commented 5 years ago

@dbryantm That's right. Ideally when a customQuery is passed we shouldn't parse the breakpoints. If breakpoints are passed as props, we can ignore them.

flexdinesh commented 5 years ago

29 closes this issue