style-hook
easy to write dynamic css
features
- use css in react hook
- easy to get started
install
use npm
npm i -S style-hookor use yarn
yarn add style-hookminify 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
typescript
support by default
Highlight and IntelliSense (recommend)
support me
if you like this project, star it, let more one know.