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“;
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>
);
}
