marcj / css-element-queries

CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
http://marcj.github.io/css-element-queries/
MIT License
4.27k stars 487 forks source link

how to listen to events #253

Closed DmitryEfimenko closed 5 years ago

DmitryEfimenko commented 5 years ago

This is either a feature request or just a question depending on whether this functionality exists or not. I'd like to set up an event listener that would tell me when a "bewakpoint" is either added or removed. For example:

document.addEventListener('css-element-size-changed', (element: HtmlElement, rule: Rule) => {
  //rule would have information about the selector that triggered the change
})

Please let me know if something like this already exists.

Edit: noticed that something similar is quite easy to achieve with this:

new ResizeSensor(element, function(size) { 
    console.log('content dimension changed', size);
});

This gets me pretty close to the functionality I'm looking for. It might be worth adding this to the documentation. Closing issue.