# react-stylesheet-decorator

> easily style react components

Latest version **0.1.0** (published 2018-03-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-stylesheet-decorator
pnpm add react-stylesheet-decorator
yarn add react-stylesheet-decorator
bun add react-stylesheet-decorator
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-03-13 |
| First published | 2017-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 3.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | k1r0s |
| Maintainers | k1r0s |

## Links

- npm: https://www.npmjs.com/package/react-stylesheet-decorator
- Repository: https://github.com/k1r0s/react-stylesheet-decorator
- Homepage: https://github.com/k1r0s/react-stylesheet-decorator#readme
- Issues: https://github.com/k1r0s/react-stylesheet-decorator/issues
- npm.io page: https://npm.io/package/react-stylesheet-decorator

## Dependencies (3)

- [kaop-ts](https://npm.io/package/kaop-ts.md) ^1.5.0
- [scope-css](https://npm.io/package/scope-css.md) ^1.0.4
- [decamelize](https://npm.io/package/decamelize.md) ^1.2.0

## Recent versions

- 0.1.0 (latest) — 2018-03-13
- 0.0.5 — 2018-02-06
- 0.0.4 — 2018-02-06
- 0.0.3 — 2018-02-06
- 0.0.2 — 2017-10-26
- 0.0.1 — 2017-10-18

## README

This decorator allows to easily style React components through adding a scoped stylesheet inside that component and defined styles only get applied to it and its descendants.

Basically it allows to style in Reactjs like Angular or [Vue does by adding a scoped stylesheet](https://vue-loader.vuejs.org/en/features/scoped-css.html)

### Capabilities

This decorator supports all CSS capabilities defined here: https://www.npmjs.com/package/scope-css

### Getting started

## Bower
just kidding! XD

## NPM
install `npm install react-stylesheet-decorator --save`

usage:

- first import

```javascript
import { stylesheet } from "react-stylesheet-decorator"
```

- then define a string with raw CSS content

```javascript
const style = `
  span { font-size: 20px }
`
```
- Plug it on render fn of some React component

```javascript

@stylesheet(style)
render() {
  return <span>something</span>
}

```

## Using Preact

This package is based on Preact package *which has the same API* but you have to use another package.
Please refer to here if you're using Preact https://www.npmjs.com/package/stylesheet-decorator

## That's all Folks!

Thanks to @_developit for its support <3.

This development is related on this conversation [Twitter Link](https://twitter.com/k1r0s/status/919271946109554694) and this issue [GH preact issue](https://github.com/developit/preact/issues/909#issuecomment-336656084)

---
_Source: https://npm.io/package/react-stylesheet-decorator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._