Responsive styles

Orbit style props accepts a specialized syntax to support responsive breakpoints.

Usage

By passing an object to any style props, you can specify which style will be applied at different breakpoints. These rules are on a min-width basis meaning that a sm value will apply from 768px and up until another higher breakpoint matches.

<Div
    backgroundColor={{
        base: "green-2",
        xs: "purple-2",
        sm: "green-2",
        md: "accent-2",
        lg: "neutral-2",
        xl: "warning-2"
    }}
    width={18}
    maxWidth="100%"
    padding={4}
>
    <Paragraph fontSize={4}>Lost in space.</Paragraph>
</Div>

Mobile first

Not all breakpoints must be explicitly defined. In the following example, base and lg breakpoints are explicitly declared. When match, the xl breakpoint will implicitly take the value set by the lg breakpoint since it is wider than lg. Everything below lg inherits the base color.

<Div
    backgroundColor={{
        base: "alias-success",
        lg: "alias-warning"
    }}
    width={18}
    maxWidth="100%"
    padding={4}
>
    <Paragraph fontSize={4}>Lost in space.</Paragraph>
</Div>

useResponsiveValue

To resolve a responsive value within a React component, Orbit provides the useResponsiveValue hook.

import { useResponsiveValue } from "@sharegate/orbit-ui";

const fluidValue = useResponsiveValue({ base: true, lg: false });

Breakpoints

The following responsive breakpoints are supported by Orbit style props and acts as their CSS media query counterparts: