NOTE: Introduced feature in
v0.5.1.
USAGE: REPL does not support viewport values, resize your Browser to observe this feature.
MediaQueryRender disables rendering of child content while the provided Media Quer(y/eries) are not active.
<script>
import {
Box,
MediaQueryRender,
} from "@kahi-ui/framework";
</script>
<MediaQueryRender
queries="(min-width: 1280px) and (min-height: 720px)"
>
<Box palette="affirmative" padding="small">
This is only rendered when the Viewport is at
least sHD resolution
</Box>
</MediaQueryRender>Imports
<script>
import {MediaQueryRender} from "@kahi-ui/framework";
</script>Compatibility
The Component only runs on clientside Browsers with Javascript enabled. So you need to plan a SSR-compatible fallback if using in a SSR scenario.
Multiple Queries
USAGE: REPL does not support viewport values, resize your Browser to observe this feature.
You can specify multiple Media Queries by passing in a string array (string[]) via the queries property.
<script>
import {
Box,
MediaQueryRender,
Text,
} from "@kahi-ui/framework";
</script>
<MediaQueryRender
queries={[
"(min-width: 1280px) and (min-height: 720px)",
"(aspect-ratio: 16/9)",
]}
>
<Box palette="affirmative" padding="small">
This is only rendered when the Viewport is at
least sHD resolution <Text is="strong">
OR
</Text> is 16:9.
</Box>
</MediaQueryRender>Behavior
USAGE: REPL does not support viewport values, resize your Browser to observe this feature.
When working with multiple Media Queries, you can specify that ALL Media Queries must be valid in order to render. Via the behavior property.
<script>
import {
Box,
MediaQueryRender,
Text,
} from "@kahi-ui/framework";
</script>
<MediaQueryRender
queries={[
"(orientation: portrait)",
"(pointer: coarse)",
]}
behavior="and"
>
<Box palette="affirmative" padding="small">
This is only rendered when the Viewport is in a
portrait orientation <Text is="strong">
AND
</Text> the main interaction device is touch.
</Box>
</MediaQueryRender>
<MediaQueryRender
queries={[
"(orientation: landscape)",
"(pointer: fine)",
]}
behavior="and"
>
<Box palette="affirmative" padding="small">
This is only rendered when the Viewport is in a
landscape orientation <Text is="strong">
AND
</Text> the main interaction device is mouse / stylus.
</Box>
</MediaQueryRender>Fallthrough
USAGE: REPL renders in your Browser, so this feature will always conditionally render anyway.
By default, MediaQueryRender will never render when running in SSR environments. You can change it to always render in those environments via the fallthrough property.
<script>
import {
Box,
MediaQueryRender,
} from "@kahi-ui/framework";
</script>
<MediaQueryRender
queries="(prefers-color-scheme: dark)"
fallthrough
>
<Box palette="light" padding="small">
This is only rendered when the user's color
preference is dark.
</Box>
</MediaQueryRender>
<MediaQueryRender
queries="(prefers-color-scheme: light)"
fallthrough
>
<Box palette="dark" padding="small">
This is only rendered when the user's color
preference is light.
</Box>
</MediaQueryRender>