media-query based conditional React component rendering
import { Show } from "./Breakpoints"
const sm = 640;
const lg = 1024;
const MyComponent = (props) => {
<Show upto={sm}>
rendered when viewport is smaller than 640px
</Show>
<Show from={sm} upto={lg}>
rendered when viewport is both:
- at least 640px
- smaller than 1024px
</Show>
<Show from={lg}>
rendered when viewport is at least 1024px
</Show>
}
Alternatively:
import { useMinWidthBreakpoint } from "./Breakpoints"
const MyComponent = (props) => {
const greaterThanOrEqualTo1024 = useMinWidthBreakpoint(1024);
if (greaterThanOrEqualTo1024) {
return (<h1>Real Big</h1>);
} else {
return (<p>Kinda Small</p>);
}
};