Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @style-hooks/core with all npm packages installed. Try it out:

require("@emotion/core/package.json"); // @emotion/core is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var core = require("@style-hooks/core")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@style-hooks/core v2.0.6

🧚‍♀️Turn your React function components into responsive components with style props using Style Hooks and Emotion

bundlephobia codecov Build Status MIT 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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free