add media query listener

[mangoischke]

update mediaQuery and it’s test to matchMediaQuery

Q	A
Bug fix?	no
New feature?	yes
Improvement?	no
BC breaks?	no
Deprecations?	no
Docs PR	missing

[apfelbox]

I might have an idea for a slightly different implementation / extension, so please have some patience.

[apfelbox]

So I finally was able to add my integration. I pushed it in this PR, to see the changes.

The idea is the following: get away from every component having its own media query, but instead having a single:

lib/media-queries.ts:

export const onContentWidth = mediaQueryMatcher("screen and (min-width: 1128px");
export const onStructureWidth = mediaQueryMatcher("screen and (min-width: 1440px");
// ...

And every component can then hook into these global media queries. You would have the definitions in a global file anyway, so we can just put the complete matcher there.

Usage for example in a hook:

let [isContentWidth, setContentWidth] = useState(onContentWidth.matches());

useEffect(() => {
    onContentWidth.on(setContentWidth);
    return () => onContentWidth.off(setContentWidth);
}, []);

[apfelbox]

I also added support for onOff(), so the example above can be written as:

let [isContentWidth, setContentWidth] = useState(onContentWidth.matches());

useEffect(() => onContentWidth.onOff(setContentWidth), []);