npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more ¬Ľ

@style-hooks/core

2.0.0¬†‚Äʬ†Public¬†‚Äʬ†Published

codecov


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

install

npm i @style-hooks/core

Downloadsweekly downloads

133

version

2.0.0

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability