Props, State, Config & Theming Based Styling With React-JSS

Modern Styling Made Simple With Hooks & JSS

Medium | Twitter | Github

In this article I’ll show you how you can use React-JSS to create styles based on props (offered by React-JSS out-the-box), state, config & theming (also offered out-the-box by React-JSS).

Motivation

When creating UI components, I find myself requiring each component to have its own configuration, which normally exists as a separate asset of the component (e.g. config.js). I’m sure you can imagine the sort of thing I’m talking about:

export default {
  size: 'large', 
  analytics: true, 
  icon: 'some/file.png', 
  primaryColor: 'red'
}

…general configurable aspects of a given UI component at the highest level. We don’t need to worry too much about how this configuration might be used for now, we just need to understand why it might be required.

Theming is a more generalised concept; more often than not, even if your individual UI components do not have their own configuration, your UI as a whole likely will; AKA a theme. Like many others, I too use themes. I also find myself requiring the ability to expose my theme to my UI components’ configurations. This is generally so I can reuse certain values within the configuration of my components. This tends to leave my configuration as a function accepting a theme argument, instead of a plain object:

export default (theme) => ({
  size: 'large', 
  analytics: true, 
  icon: 'some/file.png', 
  primaryColor: theme.colors.brand1
})

You can read more about how theming and configuration relate to each other in my article Creating Scalable UIs: Theming & Configuration.

The motivation for wanting access to my state within my styles is fairly simple; I quite often find myself wanting to style some component based on some corresponding state. For example, if my component has an isActive state, I may wish for a child element of my component to be hidden depending on the value of this state. There doesn’t seem to be any API offered by React-JSS accommodating for this out-the-box.

Example

Now that we’ve got that out the way, let’s look at a working example (the code is of more interest than the result…):

The code for our MyComponent.jsx file would look like this:

The magic is in the exploitation of React-JSS’s Dynamic Values feature, which is intended to be used for props only. (i.e useStyles(props)). However, by passing an object (i.e useStyles({ props, config, state })), we can destructure this object when we use it in the styles like so:

And that’s pretty much it — everything else shown in this article is either standard React, React-JSS, or plain JavaScript.

Further Thoughts

Whilst the result satisfies all initial goals, having to repeat the setup outlined in this article for each UI component in your library would soon become cumbersome. As it would be more or less the exact same thing for each component, my article React — Micro-Components explains how you can abstract this behaviour to wrapper components, removing the need to duplicate it for each UI component.

Twitter | Github