https://github.com/matype/picostyle-react
Picostyle for React
https://github.com/matype/picostyle-react
Last synced: 9 months ago
JSON representation
Picostyle for React
- Host: GitHub
- URL: https://github.com/matype/picostyle-react
- Owner: matype
- Created: 2017-08-20T06:45:23.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-10T20:05:32.000Z (over 8 years ago)
- Last Synced: 2025-10-05T13:52:13.162Z (10 months ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Picostyle for React
[![350 gzip][gzip-badge]][bundlesize]
[gzip-badge]: https://img.shields.io/badge/minified%20&%20gzipped-350%20B-brightgreen.svg
[bundlesize]: https://github.com/siddharthkp/bundlesize
Picostyle React is the package of [Picostyle](https://github.com/picostyle/picostyle) for [React](https://github.com/facebook/react).
[Try it Online](https://codepen.io/morishitter/pen/qXaPYQ?editors=0010)
## 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](https://www.styled-components.com/) 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](https://github.com/picostyle/picostyle-react/tree/master/example)
```js
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 (
Picostyle
)
}
}
ReactDOM.render(
,
document.getElementById("app")
)
```