https://github.com/fakundo/preact-jss-hook

JSS integration with Preact
https://github.com/fakundo/preact-jss-hook

jss preact

Last synced: 2 months ago
JSON representation

JSS integration with Preact

• Host: GitHub
• URL: https://github.com/fakundo/preact-jss-hook
• Owner: fakundo
• Created: 2020-02-20T12:35:18.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T02:21:13.000Z (about 2 years ago)
• Last Synced: 2024-11-16T21:15:19.215Z (2 months ago)
• Topics: jss, preact
• Language: JavaScript
• Homepage:
• Size: 961 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 (

    


      Red block

    

  )

}

```


JSS Provider

```js

import { JssProvider } from 'preact-jss-hook'

import { create } from 'jss'

const jss = create()

const theme = {

  primaryColor: 'red'

}

export default () => (

  

    Children

  

)

```

Using Theme

```js

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

const useStyles = createUseStyles((theme) => ({

  root: {

    color: theme.primaryColor

  }

}))

export default () => {

  const { classes, theme } = useStyles()

  return (

    


      Red block

    

  )

}

```


Using HOC

```js

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

const withStyles = createWithStyles((theme) => ({

  root: {

    color: theme.primaryColor

  }

}))

const SuperComponent = ({ classes, theme }) => (

  


    Red block

  

)


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