Picostyle React is the package of Picostyle for React.
- 🚀 The smallest CSS-in-JS library: Only 0.3 KB (minified & gzipped).
- 👏 Zero dependencies: And under 60 LOC.
- 💅 Styled components: Gives you a styled component like styled-components that y'all love.
- ❤️ For React: The 1 KB frontend library family.
$ npm install picostyle-react
Picostyle React works well with:
- Media Queries (
@media
) - Pseudo-element (
::before
) - Pseudo-classes (
:hover
)
import React from "react"
import ReactDOM from "react-dom"
import picostyle from "picostyle-react"
const ps = picostyle(React.createElement)
const keyColor = "#f07"
const Text = ps("h1")({
fontSize: "64px",
cursor: "pointer",
color: "#fff",
padding: "0.4em",
transition: "all .2s ease-in-out",
":hover": {
transform: "scale(1.3)",
},
"@media (max-width: 450px)": {
fontSize: "32px",
},
})
const Wrapper = ps("div")({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100vw",
height: "100vh",
backgroundColor: keyColor,
})
class Hello extends React.Component {
render() {
return (
<Wrapper id="pico">
<Text>Picostyle</Text>
</Wrapper>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById("app")
)