/picostyle-react

Picostyle for React

Primary LanguageJavaScript

Picostyle for React

350 gzip


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)

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")
)