metaquery

metaquery copied to clipboard

... so you don't need to harvest them out of an onBreakpointChange handler - you can just query metaQuery.activeBreakpoints at any time to see what the current state of the world is.

My use case is checking for specific breakpoints in React lifecycle methods some time after an onBreakpointChange handler is added, but before the window actually changes size again.

I like dis, but I'm not clear on the use case you mentioned. Got an example of a React component before/after this change?

ping @bensmithett

So I missed that calling onBreakpointChange sneaks in a synchronous call to mqChange.

Kinda tricky to see unless you look at the internals - event handlers don't usually get called unless the event really happened.

// Didn't expect this to work, the event handler *looks* async
const activeBreakpoints = "dontKnowYet";

metaQuery.onBreakpointChange((activeBreakpointsFromEvent) => {
  activeBreakpoints = activeBreakpointsFromEvent;
});

console.log(activeBreakpoints); // ["widescreen"]

Maybe it's clearer if the event handler isn't magically triggered the first time?

const activeBreakpoints = metaQuery.activeBreakpoints;

metaQuery.onBreakpointChange((activeBreakpointsFromEvent) => {
  activeBreakpoints = activeBreakpointsFromEvent;
});

I don't have an issue any more though, so feel free to close :smile: