How to efficiently type your styled-components with Flow

What I needed to build

I was building a simple theme with a series of colors using emotion as well as a Title styled component that would have a color prop. The color will be injected through a theme prop. This prop comes either from a ThemeProvider component that wraps your app or from a withTheme Higher-order Component. I’m not going to detail more about the setup of emotion in this post but you can find all the adequate documentation here.

Here’s the component that we’ll use as an example:

1
import styled from 'react-emotion';
2

3
const Title = styled('h1')(`
4
  color: ${(props) => props.theme.colors[prop.color]}
5
`);
6

7
export default Title;

The aim here was the following: to make sure that anyone who uses the Title component could change its color via a prop but only let them pick the blue colors provided by the theme. Code-wise this is what we want to have:

1
// Good
2
<Title color="blue1">
3
    Styled Components are awesome!
4
</Title>
5

6
// Bad
7
<Title color="red2">
8
  Styled Components are awesome!
9
</Title>

This is one case when I discovered that Flow can surprisingly help to solve this kind of problem. The theme used for this example looks like the following:

1
// @flow
2
type Blues = {
3
  blue1: '#099CEC',
4
  blue2: '#6BC3F3',
5
};
6

7
type Reds = {
8
  red1: '#E12B0C',
9
  red2: '#FB786A',
10
};
11

12
type Greens = {
13
  ...
14
};
15

16
type Theme = {
17
  colors: {
18
    [string]: '#099CEC' | '#6BC3F3' | '#E12B0C' | '#FB786A' | ...
19
  },
20
  ...
21
}
22

23
const blues: Blues = {
24
   blue1: '#099CEC',
25
  blue2: '#6BC3F3',
26
}
27

28
const reds: Reds = {
29
  red1: '#E12B0C',
30
  red2: '#FB786A',
31
};
32

33
const greens: Greens = {
34
  ...
35
}
36

37
const theme: Theme = {
38
  colors: {
39
    ...blues,
40
    ...reds,
41
    ...greens,
42
  },
43
  ... rest // rest of the properties of our theme
44
}

When it comes to color usage, we don’t want to leave the possibility for other developers to use a color outside of the theme. This is why creating a Theme type and the different color types like Blues and Reds (as well as the other properties of your theme) from the start is a good idea so you immediately document the do’s and don’t’s of your theme at the static typing checking level. In the rest of this post we’ll essentially focus on how to leverage these types like Blues to validate props of Title.

In the example above, we can see how enums can be useful: colors is a map of some string value (the name of the color) to one and only one of these 4 colors.

How to type a styled component

Typing the styled component is the first step**.** I didn’t know how to this at first so I had to do a bit of research on this one and ended up finding this comment on a Github issue which was very helpful. Following the example given in this issue, I wrote this typed implementation of Title:

1
// @flow
2
import type { ComponentType } from 'react';
3
import styled from 'react-emotion';
4

5
type TitleProps = {
6
  color: string,
7
};
8

9
const Title: ComponentType<TitleProps> = styled('h1')(`
10
  color: ${(props) => props.theme.colors[props.color]}
11
`);
12

13
export default Title;

It’s typed a bit fast but, it’s still better than having no type. Now we can use Title with a color prop as we wanted, but sadly here we can pass any string, i.e. any colors which doesn’t quite help us given what we want to build.

Enums

The next step was to type the component better, meaning, to make type it in such a way that it would only accept a subset of colors. The string type is way too generic. All the following examples would pass Flow without any error:

1
<Title color="hello"/> // No error despite hello not being a color
2

3
<Title color="red1"/> // No error but we don't want Titles to be red

This is where enums comes into the picture. Indeed, by specifying the subset of the colors of the theme we want for Title we can narrow down which props can be passed to the component.

1
type TitleProps = {
2
  color: 'blue1' | 'blue2',
3
};

This would mean that Flow would fail if we use Title with red1 as color:

The $Keys utility type

However, whenever the theme gets updated with some extra blue colors, the type will have to be manually updated and we’ll have to add every single color name we want to be usable with Title for Flow not to fail in the future when these will be passed as props. This is ok if we have a limited number of possibilities, but with scalability in mind, it’s not very practical.

We can type our component even better using the $Keys utility type. Here’s how to use it:

1
// @flow
2
import type { ComponentType } from 'react';
3
import styled from 'react-emotion';
4
import type { Blues } from './theme';
5

6
type ValidColors = $Keys<Blues>;
7

8
type TitleProps = {
9
  color: ValidColors,
10
};
11

12
const Title: ComponentType<TitleProps> = styled('h1')(`
13
  color: ${(props) => props.theme.colors[props.color]}
14
`);
15

16
export default Title;

Here’s how$Keys works in our case: it extracted the type ‘blue1' | ‘blue2' from our Blues type by getting its keys. Thus, every time we update our color palette and the respective color types, our Title component will be properly typed. We can thus see that typing this way is more elegant than manually adding items to an enum.

In conclusion, we can see that Flow can be used for more than just typing components for the sake of typing, it can be leveraged to properly define our design-system in our apps which can be game-changing for our development flow. By clearly reflecting the specs requested for this problem as Flow types, we avoid any “bad surprises” in production as any unwanted changes can be now prevented during the testing phase. 
This is why, whether the project is big or small, I plan on using Flow even more when working on design-systems and themes in the near future.