https://github.com/johno/style-hooks

[WIP] Experimenting with pure JS styles using React Hooks
https://github.com/johno/style-hooks

Last synced: 3 months ago
JSON representation

[WIP] Experimenting with pure JS styles using React Hooks

• Host: GitHub
• URL: https://github.com/johno/style-hooks
• Owner: johno
• Created: 2018-11-09T21:41:29.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-13T14:13:07.000Z (about 6 years ago)
• Last Synced: 2024-10-09T09:58:13.139Z (4 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# :flags: style-hooks

> CSS-in-Hooks

:warning: 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

```jsx

import Styled from 'style-hooks'

const Input = props => {

  return (

    

  )

}

```

## Related

The following talks and projects have served as an inspiration and/or resource for this project.

- https://github.com/ryanflorence/react-conf-2018

- cxs

- nano-style

- styled-system

- the-platform

- glamor

- emotion

- styled-components