react-tss

react-tss is a simple alternative exposure of JSS in React to the official react-jss. It is not a drop-in replacement, as it aims for simpler and more TypeScript-first usage.

• Styles are injected using hooks only.
• Themes are injected using consumers only, thereby allow a more composited hook.
• All stylesheets are static, theme/prop-induced variants are memoized by object hashing (in a similar manner to StyledComponents).
• Keyframes, globals, and pseudoselectors get their own TypeScript keys, resulting in more predictable typing.
• Style definitions are function-evaluable at any level.

Installation

npm install react-tss

Usage

Hooks are created with createUseStyles. Stylesheet produced are inserted in the order of invocation order of createUseStyles (same idea as in react-jss).

Default JSS presets are automatically included.

1import { createUseStyles } from 'react-tss'

Static styles

1const useStyles = createUseStyles({
2  // note the top-level "classes" declaration
3  classes: {
4    red: {
5      color: "red"
6      animation: "$fadeOut 1s" // prefix keyframes with `$`
7    },
8    blue: {
9      color: "blue",
10      animation: "$fadeIn 1s",
11      pseudos: { // pseudoselectors are  wrapped in a key
12        "&:hover": {
13          color: "darkblue"
14        }
15      }
16    }
17  },
18
19  // keyframes are defined here
20  keyframes: {
21    fadeIn {
22      from: { opacity: 0 },
23      to: { opacity: 1 }
24    },
25    fadeOut: {
26      // numeric keys denote percentage.
27      [0]: { opacity :1 },
28      [100]: { opacity: 0 }
29    }
30  },
31
32  // global styles are defined here
33  global: {
34    body: {
35      fontSize: 20
36    }
37  }
38});

Then later

1// in a component
2const classes = useStyles();
3return <div className={classes.red} />;

Prop-dependent styles

Declarations can take function form as long as the resulting class names remain stable. createUseStyles can be invoked with just a single type parameter just to declare the prop type (so there are two invocations for this declaration).

1const useStyles = createUseStyles<{ red: string, blue: string, deepBlue: string }>()({
2  // note the top-level "classes" declaration
3  classes: {
4    red: props => ({
5      color: props.red
6    }),
7    blue: {
8      color: props => props.blue,
9      pseudos: props => ({
10        "&:hover": {
11          color: props.deepBlue
12        }
13      })
14    }
15  },
16
17  // ...
18});

Then later the props are to be provided in the hook directly.

1// in a component
2const classes = useStyles({ red: "red", blue: "blue", darkBlue: "darkblue" });
3return <div className={classes.red} />;

Context-dependent ("themed") styles

Use createUseStyles.themed() to inject a theme provider into the style hook. You can pass either a React context or a hook that in some manner supplies the theme values. Providing a context is simply shortcut for providing the hook () => useContext(context).

The style declaration can then take a two-argument function form, where the second argument is the injected theme value.

1import { createContext } from 'react';
2interface Theme { red: string, blue: string, deepBlue: string }
3const themeContext = createContext<Theme>({
4  red: "red",
5  blue: "blue",
6  deepBlue: "deepBlue"
7});
8
9
10// Expands to `createUseStyles.theme(() => useContext(themeContext))( ...`
11// So you could pass any function that acts as a context injection hook,
12// for instance, transforming the context value so that the provider interface
13// is different from the consumer interface.
14const useStyles = createUseStyles.theme(themeContext)({
15  // note the top-level "classes" declaration
16  classes: {
17    red: (_, theme) => ({
18      color: theme.red
19    }),
20    blue: {
21      color: (_, theme) => theme.blue,
22      pseudos: (_, theme) => ({
23        "&:hover": {
24          color: theme.deepBlue
25        }
26      })
27    }
28  },
29
30  // ...
31});

Then later the props are to be provided in the hook directly.

1// in a component
2const classes = useStyles({ red: "red", blue: "blue", darkBlue: "darkblue" });
3return <div className={classes.red} />;

Mixing props and themes

Just combine the two declaration patterns.

1createUseStyles.themed(themeContext)<PropType>({
2  /* ... */
3})

Function at any level

Note that the function form can take place at any level. All of the declarations below are valid and can be mixed and mached at will. Nested functions are also OK, they will always receive (props, theme) as arguments.

1createUseStyles<PropType>()(props => ({
2  classes: /* ... */,
3  keyframes: /* ... */,
4  // ...
5}));

1createUseStyles<PropType>()({
2  classes: props => ({ /* ... */ }),
3  keyframes: props => ({ /* ... */ }),
4  global: props => ({ /* ... */ })
5});

1createUseStyles<PropType>()({
2  classes: {
3    classA: props => ({
4      color: /* ... */,
5      backgroundColor: /* ... */,
6      border: props => /* ... */ // nested functions are OK
7    }),
8    classB: {
9      color: props => /* ... */
10    }
11  },
12  keyframes: {
13    keyframes1: props => ({ /* ... */ }),
14    keyframes2: {
15      [0]: props => ({ /* ... */ }),
16      [50]: {
17        opacity: props => /* ... */
18      }
19    }
20  },
21  globals: {
22    body: props => ({ /* ... */ }),
23    a: {
24      pseudos: props => ({ /* ... */ })
25    }
26  }
27})

Notes on stylesheet management

react-tss's stylesheet management is very simple: every styling variant receives a new stylesheet which is unmounted when that variant is no longer used. There is a caching mechanism in place that allows a certain number of variants to be retained before it is disposed, reducing the number of times styles are mounted and remounted in some cases.

A styling variant is identified by a hash sum of the evaluated styling object.