threepointone/glamor

container queries

Closed this issue · 8 comments

threepointone commented

parent issue for container queries.

  • what's the perf profile for such a thing?
  • what does it add to glamor's weight? can it be a separate module?
  • etc etc

feel free to add/discuss stuff here.

souporserious commented

Would love to see this baked into Glamor! I did some heavy research on this a couple of months ago. I landed on using element-resize-detector for react-measure. There's also react-container-query you could look at for some ideas. Would be cool to see it as a seperate module. If it's included you get container queries. If it's not, you don't. I'd love to help here if I can :) just let me know.

threepointone commented

@souporserious you're welcome to have a shot at this! I loved your original modules. I haven't dived into this myself yet, so feel free to lead it.

threepointone commented

glamor supports the syntax of said queries, but shouldn't hold an opinion about the polyfill etc. closing this for now.

souporserious commented

@threepointone just dropped this in React Measure and it has been working great so far https://github.com/que-etc/resize-observer-polyfill the latest Chrome has the ResizeObserver so it doesn't get included if it doesn't need to. Is there an API for writing container queries?

threepointone commented

the thing is, glamor doesn't know which element it gets attached to, or when they'd mount/unmount, so I don't know how I'd attach the ResizeObserver to the element.

souporserious commented

Ah I see. Yeah might be better to do it with an add on or something. Actually, I just finished this yesterday https://github.com/souporserious/react-component-query might try and play with it tonight and see if I can get something working :)

threepointone commented

AH man this is perfect, would work great with glamor!

  • 🎉1