1.3.2 • Published 4 years ago
style-hook v1.3.2
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
typescript
support by default
Highlight and IntelliSense (recommend)
todo list
see TODO
support me
if you like this project, star it, let more one know.
Credits
1.3.2
4 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.3
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.0.1
5 years ago