https://github.com/style-hook/style-hook

use css in js with react hook.
https://github.com/style-hook/style-hook

css css-hook react-hook react-hooks style-hook

Last synced: about 1 month ago
JSON representation

use css in js with react hook.

• Host: GitHub
• URL: https://github.com/style-hook/style-hook
• Owner: style-hook
• License: mit
• Archived: true
• Created: 2019-09-06T09:12:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T16:19:34.000Z (almost 2 years ago)
• Last Synced: 2024-04-24T08:16:14.448Z (8 months ago)
• Topics: css, css-hook, react-hook, react-hooks, style-hook
• Language: TypeScript
• Size: 558 KB
• Stars: 15
• Watchers: 2
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `style-hook`
• awesome-react-hooks-cn - `style-hook`
• awesome-react-hooks - `style-hook`
• awesome-react-hooks - `style-hook`

README

        
![logo](https://avatars1.githubusercontent.com/u/54980825?s=200&v=4)

# style-hook

easy to write dynamic css

[![Build Status](https://www.travis-ci.org/style-hook/style-hook.svg?branch=master)](https://www.travis-ci.org/style-hook/style-hook)

[![codecov](https://codecov.io/gh/style-hook/style-hook/branch/master/graph/badge.svg)](https://codecov.io/gh/style-hook/style-hook)

# features

* use css in react hook

* easy to get started

# install

use npm

```bash

npm i -S style-hook

```

or use yarn

```bash

yarn add style-hook

```

## minify css in js (recommend)

add babel plugin to your .babelrc

```json

{

  "plugins": [

    "style-hook/babel"

  ]

}

```

# usage

## say hello world to get started

``` jsx

import React from 'react'

import { useStyle } from 'style-hook'

export default function() {

  const s = useStyle `

    font-size: 30px;

    margin: 20px;

    color: red;

  `

  return 
hello world

}

```


## a dynamic style example

all grammars are js, one you need to learn is js.

``` jsx

import React from 'react'

import { css, useStyle } from 'style-hook'

function HelloWorld(props) {

  const cName = useStyle `

    font-size: 30px;

    width: ${100/3}%;

    margin: ${props.margin || 10}px;

    color: ${props.color};

    :hover {

      ${props.hoverStyle}

    }

  `

  return 
hello world

}

export default () => {

  const hoverStyle = css `color: red;`

  return (

    

  )

}

```


## more usages

see the wiki: [api](https://github.com/style-hook/style-hook/wiki/api) and [F&Q](https://github.com/style-hook/style-hook/wiki/F&Q)

# typescript

support by default

# Highlight and IntelliSense (recommend)

* [vscode extension](https://marketplace.visualstudio.com/items?itemName=coppy.style-hook)

# support me

if you like this project, star it, let more one know.

# Credits

* [styled-components](https://github.com/styled-components/styled-components)

* [stylis](https://github.com/thysultan/stylis.js)