react-jss-hook

A experimental react hook for using jss styles

Installation

yarn add react-jss-hook

Usage

import createUseStyles, { 
  JssContext,
  ThemeProvider,
} from 'react-jss-hook';
import jss from 'jss';

const useStyles = createUseStyles((theme) => ({
  button: { 
    color: 'red',
    fontSize: theme.fontSize,
    backgroundColor: data => data.bg,
  },
}));

type Props = { bg: string };

function Button(props: Props) {
  const classes = useStyles(props);
  
  return (
    <button className={classes.button}>
      {props.children}
    </button>
  );
}

function App() {
  return (
    <JssContext value={{ jss: jss }}>
      <ThemeProvider theme={{ fontSize: 16 }}>
        <Button bg="black">
          Hello
        </Button>
      </ThemeProvider>
    </JssContext>
  );
}