style-hook / style-hook

use css in js with react hook.

style-hook

easy to write dynamic css

features

• use css in react hook
• easy to get started

install

use npm

npm i -S style-hook

or use yarn

yarn add style-hook

minify css in js (recommend)

add babel plugin to your .babelrc

{
  "plugins": [
    "style-hook/babel"
  ]
}

usage

say hello world to get started

import React from 'react'
import { useStyle } from 'style-hook'
export default function() {
  const s = useStyle `
    font-size: 30px;
    margin: 20px;
    color: red;
  `
  return <div className={s}>hello world</div>
}

a dynamic style example

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

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 <div className={cName}>hello world</div>
}
export default () => {
  const hoverStyle = css `color: red;`
  return (
    <HelloWorld color="pink" hoverStyle={hoverStyle} />
  )
}

more usages

see the wiki: api and F&Q

typescript

support by default

Highlight and IntelliSense (recommend)

• vscode extension

support me

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

Credits

• styled-components
• stylis