@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 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 = () => (
  <ThemeProvider theme={theme}>
    {/* 
      Shows off the 'as' prop, 
      followed by 'breakpoint props',
      followed by the 'css' prop
    */}
    <Box
      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 {'<main>'}
    </Box>
  </ThemeProvider>
)

Installation

npm i @style-hooks/core @emotion/core

yarn add @style-hooks/core @emotion/core

Playground

Check out @style-hooks on CodeSandbox

API Documentation

Complete documentation can be found here

• Introduction Learn more about the basics of style-hooks
• useStyles() A hook for creating responsive CSS styles with responsive breakpoints from input props
• createElement() A wrapper around React.createElement for adding an as prop and css prop to your component
• <ThemeProvider> The theme context provider
• <ThemeConsumer> The theme context consumer
• useTheme() A hook for consuming the theme
• <StylesConsumer> A context consumer for reading, replacing, and merging themes
• useStylesContext() A hook for reading, replacing, and merging themes