/* Code Comments */

DRY And Styled Components

October 15, 2019

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:1

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


Stephen Weiss

Thanks for reading! My name's Stephen Weiss. I live in Chicago with my wife, Kate, and dog, Finn.
Click here to see the archives of my weeks in review and sign up yourself!