Skip to content
🧚‍♀️Turn your React function components into responsive components with style props using Style Hooks and Emotion
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.prettierignore
.prettierrc
.travis.yml
LICENSE
README.md
jest.config.js
package.json
yarn.lock

README.md

Bundlephobia Code coverage Build status License



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

You can’t perform that action at this time.