🎏 style-hooks

CSS-in-Hooks

⚠️ This is an experiment with React Hooks (alpha) to implement a subset of CSS-in-JS. Please don't use this in production, styled-components and emotion are much better for that.

Why?

I've been pondering a lighter-weight CSS-in-JS for a while, when I saw Hooks announced it seemed like a nice new API to give it a try. This is intended as a project to learn how Hooks work while scratching an itch regarding some of my dissatisfaction with existing CSS-in-JS solutions.

Goals

Add some type of generator usage so we can do something like styled({ as: 'h1, fontSize: [12, 16, 20, 24] }).

Firstly, I'd like to continue working on this project and measuring the performance to see how it affects performance in the browser and overall bundle sizes.

Natively tie into styled-system.

Installation

npm i -S style-hooks react@next react-dom@next

Usage

import Styled from 'style-hooks'

const Input = props => {
  return (
    <Styled
      {...props}
      as='input'
      style={{
        border: 'thin solid gray',
        focus: {
          border: 'thin solid blue',
          outline: 'none'
        },
        hover: {
          boxShadow: '0 5px 10px rgba(0, 0, 0, .5)'
        }
      }}
    />
  )
}