picostyle-react

Picostyle for React

Picostyle React is the package of Picostyle for React.

Try it Online

Features

• 🚀 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.

Installation

$ npm install picostyle-react

Usage

Picostyle React works well with:

• Media Queries (@media)
• Pseudo-element (::before)
• Pseudo-classes (:hover)

With React

Get the Code

import React from "react"
import ReactDOM from 'react-dom'
import picostyle from "picostyle-react"
 
const ps = picostyle(React.createElement)
 
class Hello extends React.Component {
  render() {
    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,
    })
 
    return (
      <Wrapper id="pico">
        <Text>Picostyle</Text>
      </Wrapper>
    )
  }
}
 
ReactDOM.render(
  <Hello />,
  document.getElementById("app")
)