# preact-jss-hook

> JSS integration with Preact

Latest version **2.1.2** (published 2021-04-09) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install preact-jss-hook
pnpm add preact-jss-hook
yarn add preact-jss-hook
bun add preact-jss-hook
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2021-04-09 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Roman Samoylov |
| Maintainers | fakundo |
| Keywords | preact, jss, css, css in js, theme |

## Links

- npm: https://www.npmjs.com/package/preact-jss-hook
- Repository: https://github.com/fakundo/preact-jss-hook
- Homepage: https://github.com/fakundo/preact-jss-hook#readme
- Issues: https://github.com/fakundo/preact-jss-hook/issues
- npm.io page: https://npm.io/package/preact-jss-hook

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2021-04-09
- 2.1.1 — 2021-02-02
- 2.1.0 — 2020-05-24
- 1.0.4 — 2020-02-26
- 1.0.3 — 2020-02-26
- 1.0.2 — 2020-02-25
- 1.0.1 — 2020-02-21
- 1.0.0 — 2020-02-20
- 0.0.1 — 2020-02-20

## README

# preact-jss-hook

[![npm](https://img.shields.io/npm/v/preact-jss-hook.svg)](https://www.npmjs.com/package/preact-jss-hook)

JSS integration with Preact.

### Installation
  
```
npm i preact-jss-hook
```

### Usage

Basic Example

```js
import { createUseStyles } from 'preact-jss-hook'

const useStyles = createUseStyles({
  root: {
    color: 'red'
  }
})

export default () => {
  const { classes } = useStyles()
  return (
    <div className={classes.root}>
      Red block
    </div>
  )
}
```

JSS Provider

```js
import { JssProvider } from 'preact-jss-hook'
import { create } from 'jss'

const jss = create()

const theme = {
  primaryColor: 'red'
}

export default () => (
  <JssProvider 
    jss={jss} // optional
    theme={theme} // optional
  >
    Children
  </JssProvider>
)
```

Using Theme

```js
import { createUseStyles } from 'preact-jss-hook'

const useStyles = createUseStyles((theme) => ({
  root: {
    color: theme.primaryColor
  }
}))

export default () => {
  const { classes, theme } = useStyles()
  return (
    <div className={classes.root}>
      Red block
    </div>
  )
}
```

Using HOC

```js
import { createWithStyles } from 'preact-jss-hook'

const withStyles = createWithStyles((theme) => ({
  root: {
    color: theme.primaryColor
  }
}))

const SuperComponent = ({ classes, theme }) => (
  <div className={classes.root}>
    Red block
  </div>
)

export default withStyles({ withTheme: true })(SuperComponent)
```

### API

- `createUseStyles(styles, hookOptions)` - hook creator

- `useStyles(hookOptions)` - hook

- `createWithStyles(styles, decoratorOptions)` - decorator creator

- `withStyles(decoratorOptions)` - decorator

- `useTheme()` - hook

- `withTheme()` - decorator

- `hookOptions = { purgeUnused = true, ...jssSheetOptions }` 

- `decoratorOptions = { withTheme = false, ...hookOptions }`

- `JssProvider`

`JssProvider` props

- `children`
- `jss` - global jss by default
- `theme` - empty object by default

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