@style-hooks/core


---

A suite of utilities for adding responsive style props to your React components
using Emotion

Use @style-hooks to seamlessly add themes, CSS-in-JS styles,
variants, breakpoint props, a css prop, and an as prop
to any React function component.

For a styled-components-like interface, check out @style-hooks/styled.

``jsx harmony
/* @jsx jsx /
import React from 'react'
import {css, jsx} from '@emotion/core'
import {createStyleHook, createElement, ThemeProvider} from '@style-hooks/core'
// Your very own style hook
const useBox = createStyleHook('box', {
w: (value, theme, props) => css
width: ${value + theme.box.sizeUnit};
,
})
// Accompanying component w/ style props using
// your style hook
const Box = props => {
props = useBox(props)
// createElement here provides this component
// an 'as' prop, you could also use emotion's
// jsx()
return createElement('div', props)
}
// The theme for your app
const theme = {box: {sizeUnit: 'px'}}
// Usage w/ theme
const App = () => (

{/*
Shows off the 'as' prop,
followed by 'breakpoint props',
followed by the 'css' prop
*/}
as="main"
w="200:phone 300:tablet"
css={theme => css
@media ${theme.breakpoints.phone} {
height: 200px;
background-color: hotpink;
}

@media ${theme.breakpoints.tablet} {
height: 300px;
background-color: skyblue;
}
}
>
Hello world from this {'