Media.md

Media React component

TODO: Describe problem and ideally how to avoid using the Media component altogether

• declerative rather than imperative

API

Setup

First things first. You’ll need to define the breakpoints of your design to produce the set of media components you can use throughout your application.

For example, consider an application that has the following breakpoints:

• A viewport width between 1 and 768 points, named sm.
• A viewport width between 768 and 1024 points, named md.
• A viewport width between 1024 and 1192 points, named lg.
• A viewport width from 1192 points and above, named xl.

You would then produce the set of media components like so:

const MyAppMediaComponents = createMedia({
  breakpoints: {
    sm: 0,
    md: 768
    lg: 1024,
    xl: 1192,
  },
  interactions: {}, // TODO: Ignore for now
})

As you can see, breakpoints are defined by their start offset, where the first one is expected to start at 0.

It’s adviceable to do this setup in its own module so that it can be easily imported thoughout your application:

export const Media = MyAppMediaComponents.Media
export const MediaContextProvider = MyAppMediaComponents.MediaContextProvider

Usage

The Media component created for your application has a few mutually exclusive props that make up the API you’ll use to declare your responsive layouts. These props all operate based on the named breakpoints that were provided when you created the media components.

The examples given for each prop use breakpoint definitions as defined in the above ‘Setup’ section.

at

Use this to declare that children should only be visible at a specific breakpoint, meaning that the viewport width is greater than or equal to the start offset of the breakpoint, but less than the next breakpoint, if one exists.

For example, children of this Media declaration will only be visible if the viewport width is between 0 and 768 points:

<Media at="sm">...</Media>

lessThan

Use this to declare that children should only be visible while the viewport width is less than the start offset of the specified breakpoint.

For example, children of this Media declaration will only be visible if the viewport width is between 0 and 1024 points:

<Media lessThan="lg">...</Media>

greaterThan

Use this to declare that children should only be visible while the viewport width is greater than the start offset of the next breakpoint.

For example, children of this Media declaration will only be visible if the viewport width is greater than 1024 points:

<Media greaterThan="md">...</Media>

greaterThanOrEqual

Use this to declare that children should only be visible while the viewport width is equal to the start offset of the specified breakpoint or greater.

For example, children of this Media declaration will only be visible if the viewport width is 768 points or up:

<Media greaterThanOrEqual="md">...</Media>

between

Use this to declare that children should only be visible while the viewport width is equal to the start offset of the first specified breakpoint but less than the start offset of the second specified breakpoint.

For example, children of this Media declaration will only be visible if the viewport width is betweenn 768 and 1192 points:

<Media between={["md", "xl"]}>...</Media>

Server-side rendering

Client-side rendering

Pros vs Cons