React components

There are different ways you can use Swatch to theme your React components. If you are using an other front-end framework than React, it is likely you can still find in this guide a pattern useful for you.

We invite you to adapt the below pattern to your own / your company coding style, i.e. :

  • Whether you use separate CSS file for each component or CSS modules
  • Whether you use CSS in JS (we don't judge you)
  • You prefer style properties (you write your CSS Inline)

An example : making a colored button

First, write the component (S)CSS. We recommend you do it in a separate file.

/* We read the background from the `x` setter */
/* We read the text color from the `x` setter. `on-x` has the value of a text color that contrasts legibly with `x` */
.colored_button:focus {
/* On hover, we color the button a darker shade */
.colored_button:active {
/* On active (on click), we color the button a lighter shade */

Now, write the React Component, in its own file as well.

import * as React from 'react'
import './ColoredButton.styles.css'
// Or import './ColoredButton.styles.module.css'
// Or import './ColoredButton.styles.scss' // if you use a preprocessor
// Or <style>Copy the styles in a style block.</style> // (That's a bit ugly tough)
// Must match the class defined in the (S)CSS file
const baseClassName = 'colored_button'
const ColoredButton({
className, // Prop provided by the 'user'
}) => (
className //The user-provided class, which we'll read the getter from
].join(' ')}
This is a colored button

Then, to apply a color, simply provide a setter in the className prop. Voila.

<ColoredButton className='x-red'/>
<ColoredButton className='x-white'/>
<ColoredButton className='x-primary'/>
<ColoredButton className='x-success'/>

Now, try it yourself

You can find below a playground illustrating this pattern.


Please note that the styles are included in the Playground only for you to practice. We repeat, in real world, we would include the styles in a separate file (as in the previous example), and we recommend you do the same.

Live Editor
The following button takes its background-color from the setter x.
The color on the inside text is automatically inferred from the background.
On hover, this button takes a darker shade of the color x
On active, this button takes a lighter shade of the color x

This is a very simple example of the power of Swatch. As you can see, in only 10 lines of CSS, we manage complex coloring, compatible with all colors.

Once you get more familiar with the Setter/Getter pattern, you will only be limited by your imagination.

Try this !

In the above playground, make the button background transparent, and get both the color and a 1px border-color from the x setter.