Back to Components

Responsive

A behavioural component that provides a way to dynamically render components and set props depending on the viewport size.

<Responsive>

PropertyTypeDefaultEditor
children [Required]

Function that is given a matching function to dynamically return depending on the viewport size.

Function

onChange

Handler that is called when a query listener is called, E.g. when the matched query has changed.

Function

queries [Required]

An array of widths to be used for adding media query listeners. This must be provided from smallest to largest.

ArrayOf

The match callback

The Responsive component uses the render callback pattern, and is provided with a single argument, a matching function, which matches against the queries given in the props.
match(String)
When provided with a String, it is the equivalent to saying "When matching the given query" or "When the screen size is equal or greater than the given query".

<Responsive queries={ ['10rem', '20rem', '30rem' }>
  { (match) => {
    /** With a screen size of 9rem */
    match('10rem'); // false
    match('20rem'); // false
    match('30rem'); // false

    /** With a screen size of 20rem */
    match('10rem'); // true
    match('20rem'); // true
    match('30rem'); // false
  } }
</Responsive>
          
match(Object)
When provided with a Object, it will return the value for the highest query, or false if none have been matched.

<Responsive queries={ ['10rem', '20rem', '30rem' }>
  { (match) => {
    /** With a screen size of 9rem */
    match({
      '10rem': <h1>Heading 1</h1>,
      '20rem': <h2>Heading 2</h2>,
      '30rem': <h3>Heading 3</h3>,
    }); // false

    /** With a screen size of 20rem */
    match({
      '10rem': <h1>Heading 1</h1>,
      '20rem': <h2>Heading 2</h2>,
      '30rem': <h3>Heading 3</h3>,
    }); // <h2>Heading 2</h2>
  } }
</Responsive>