import React from 'react'
import {css} from '@emotion/core'
import {createStyleHook} from '@style-hooks/core'
import styled from '@style-hooks/styled'

// Can be used like any other styled component system
let DivA = styled.div`
  margin: 0;
`

// The magic happens when you add @style-hooks/core
// to the mix
let useBox = createStyleHook('box', {
  m: (value, theme, props) =>
    css`
      margin: ${value}rem;
    `,
})
let useText = createStyleHook('text', {
  size: (value, theme, props) =>
    css`
      font-size: ${value}rem;
    `,
})

// Styled components composed with style hooks
// <DivAWithBoxAndText size='1' m='2'/>
let DivAWithBoxAndText = DivA.compose(
  useText,
  useBox
)

// Styled components with functions in template literals
// <DivB color='red'/>
let DivB = styled.div`
  color: ${(theme, props) => theme.colors[props.color]};
`

// Another way to compose style hooks with styled components
let DivC = styled.div(`margin: 0;`, [useBox])

// Flexible inputs, you can use strings, objects,
// and functions with props/themes
let DivD = styled.div(`margin: 0;`)
let DivE = styled.div({margin: 0})
let DivF = styled.div((theme, props) => `margin: 0;`, [useBox])
let DivG = styled.div((theme, props) => ({margin: 0}))

// And you can always create additional components
// with extra style hooks
let DivH = DivG.compose(useBox)

Installation

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

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

Peer dependencies

• @emotion/core
• @style-hooks/core

Playground

Check out @style-hooks/styled on CodeSandbox

API Documentation

Complete documentation can be found here

LICENSE

MIT