Breakpoint props

Seamlessly add media queries and breakpoints to your component props

One of the coolest features of Style Hooks is the ability to conditionally add property values based upon predefined breakpoints.

Breakpoints are defined and named inside of your theme. The default theme values are below:

let defaultTheme = {
breakpoints: {
// 0px
phone: 'only screen and (min-width: 0em)',
// 560px
tablet: 'only screen and (min-width: 35em)',
// 1280px
desktop: 'only screen and (min-width: 80em)',
},
// the breakpoints delimeter is configurable :)
breakpointsDelimiter: ':',
}

Using breakpoint props

Breakpoint props are easy to use. You can add default values and group values together. The order you define them in doesn't matter because Style Hooks uses the order from your theme when constructing them.

{/*
Adds a default background of 'orchid'
'skyblue' for tablets
'hotpink' for desktop
*/}
<Box bg='orchid skyblue:tablet hotpink:desktop'/>
{/*
You can also group values in breakpoints
This adds padding '12px 16px' for phones
and '24px 32px' for desktop
*/}
<Box padding='[12px 16px]:phone [24px 32px]:desktop'/>

Customizing breakpoints

Creating your own breakpoints is easy. Just remember that media queries will be written in the order by which you define your breakpoints in the theme. The key used in the breakpoint definition becomes the value you use after the delimiter inside your props.

Breakpoints are parsed in the following way

  1. When your breakpoint value is a number, it will be transformed into
    only screen and (min-width: ${breakpoint}px)
  2. When your breakpoint value is a string, it will be use as-is
  3. When your breakpoint value is an object, the library json2mq is used to create your media query

The function used in creating your breakpoint media queries is below:

import json2mq from 'json2mq'
const getMediaQuery = bp =>
isNaN(bp) === false
? `only screen and (min-width: ${bp}px)`
: typeof bp === 'string'
? bp
: json2mq(bp)

Custom breakpoint examples

let theme = {
// !! REMEMBER !!
// The order matters here
// Media queries will be parsed by prop values in this order
breakpoints: {
// only screen and (min-width: 0px)
// use @mobile in your props to use it
mobile: 0,
// use @large-mobile in your props to use it
[`large-mobile`]: 'only screen and (min-width: 40em)',
// screen and (min-width: 100px), handheld and (orientation: landscape)
// use @complexExample in your props to use it
complexExample: [
{screen: true, minWidth: 100},
{handheld: true, orientation: 'landscape'}
],
},
// the breakpoints delimeter is configurable :)
breakpointsDelimiter: '@',
}

Changing the default delimeter

I wouldn't blame you for disliking the : delimiter. As luck would have it, you can change the delimiter in your theme. Here's an example:

import React from 'react'
import {ThemeProvider} from '@style-hooks/core'
// perhaps you think a `@` delimiter would look
// more descriptive :)
let theme = {
breakpointsDelimiter: '@',
}
const App = () => (
<ThemeProvider theme={theme}>
{/* Assumes you have a <Box> component*/}
<Box p='3@phone 4@tablet'/>
</ThemeProvider>
)
Continue to kind prop