preact-jss-hook
JSS integration with Preact.
Installation
npm i preact-jss-hook
Usage
Basic Example
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
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
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
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