Responsive Context

a means of providing different rendering behavior based on the viewport size

Props

children

Render function that will be called with the current viewport size (e.g our base theme of size 'small', 'medium', 'large'). The size value will be derived from global.breakpoints entry in the theme object.

function

() => {}

Theme

global.breakpoints

The possible breakpoints that could affect border, direction, gap, margin, pad, and round. The default values help to optimize content for mobile, tablet, and computer.

object


{
  small: {
    value: 768,
    borderSize: {
      xsmall: "1px",
      small: "2px",
      medium: "4px",
      large: "6px",
      xlarge: "12px"
    },
    edgeSize: {
      none: "0px",
      hair: "1px",
      xxsmall: "2px",
      xsmall: "3px",
      small: "6px",
      medium: "12px",
      large: "24px",
      xlarge: "48px"
    },
    size: {
      xxsmall: "24px",
      xsmall: "48px",
      small: "96px",
      medium: "192px",
      large: "384px",
      xlarge: "768px",
      full: "100%"
    }
  },
  medium: { value: 1536 },
  large: {}
}