Custom Provider for react-media-match

react-media-match is a nice helper for media queries. Here is an example with reactive custom media queries. Maybe it helps someone.

// CustomMatcher.js
import { createMediaMatcher } from "react-media-match";

export const CustomMatcher = createMediaMatcher({
    tablet: 'screen and (max-width: 666px)',
    desktop: 'screen and (min-width: 667px)',
});

// app.js
import { CustomMatcher } from "./CustomMatcher.js";

export default function App() {
    return (
        <CustomMatcher.Provider>
            <MyComponent />
        </CustomMatcher.Provider>
    );
);

function MyComponent() {

    const text = CustomMatcher.useMedia({
        tablet: '😈 reactive tablet',
        desktop: '👼 reactive desktop',        
    });
    return (
        <p>{text}</p>
    );
}