dry and styled components

2019-10-15

~2 min read

270 words

A quick optimization to keep an eye out for while styling components - particularly those where they share logic - whether between components or between properties.

For example, dependency on the status of my component, I will show different colors at different places.

Initially, I had something like this:

import styled from ‘styled-components';
import { Circle } from ‘react-feather’;

export const Circle = styled(Circle)`
  fill: ${props => props.status === 'ERROR'
    ? ‘red’
    : props.status === 'COMPLETE'
    ? ‘green’
    : ‘grey’};
  stroke: ${props => props.status === StepStatusTypes.ERROR
    ? colors.error
    : props.status === StepStatusTypes.COMPLETE
    ? colors.success
    : colors.lightGray;};
`;

Because we’re using styled-components, we have all of the power of Javascript within our CSS. Yes, there are pros and cons to that, but the that means dynamic attributes like this are possible without adding / removing classes.

It also means that we can extract the duplicative code into a function. Like so:

import styled from ‘styled-components';
import { Circle } from ‘react-feather’;

const circleColor(props) = props =>
  props.status === 'ERROR'
    ? ‘red’
    : props.status === 'COMPLETE'
    ? ‘green’
    : ‘grey’;

export const Circle = styled(Circle)`
  fill: ${props => circleColor(props);
  stroke: ${props => circleColor(props)};
`;

Even better, since we’re consuming the same argument in both functions, we can curry them and eliminate the lambda function:¹

import styled from ‘styled-components';
import { Circle } from ‘react-feather’;

const circleColor(props) = props =>
  props.status === 'ERROR'
    ? ‘red’
    : props.status === 'COMPLETE'
    ? ‘green’
    : ‘grey’;

export const Circle = styled(Circle)`
  fill: ${circleColor};
  stroke: ${circleColor};
`;

Footnotes

¹ I’ve written previously about currying with function declarations and expressions.

Hi there and thanks for reading! My name's Stephen. I live in Chicago with my wife, Kate, and dog, Finn. Want more? See about and get in touch!