Building colorful, springy components using React Spring and Tinycolor

Stephen McLean
Jul 3 · 5 min read
Photo by Philip Veater on Unsplash

Recently, I decided to build a web application to allow designers and developers to generate variants for colors and to check color accessibility. In this post, I would like to give you a walkthrough of how I built some of the components I would use in that app.

Full source code for the application can be found at the end of this article, along with a link to a Storybook instance with all of the described components.

Dependencies

To help me build these components I used Tinycolor, a library with a range of color utility functions which you can use to manipulate, transform, and represent colors.

I have also used React Spring, which is a spring physics based library that allows you to add animations to your project really easily.

Color Tile

Color Tile designs

The simplest component out of our list, the color tile will serve as a building block for other components. The responsibility of this component is to display a color, along with its name and HEX value.

Color Tile source

Notes on the implementation

  1. Line 17, and line 19 might look slightly strange if you’re not familiar with the excellent classnames library. Basically, the classnames library allows you to concatenate and conditionally apply CSS classes to your elements.
  2. On line 36 you can see that we calculate the HEX string of the color passed in. Since we’re using the color prop passed in directly in the CSS, it can be in any acceptable CSS color format, not just HEX. It could be an rgba string for example. This is where Tinycolor comes in. We can give it any of those formats and it returns a nicely formatted HEX string we can display along with our tile.
  3. Sticking with line 36, you might also have noticed that the function to calculate the HEX string is wrapped in useMemo . This is because we only want to compute this value if the color changes. We can avoid recalculating if any of the other props change which might cause a rerender. I’m still learning the new Hooks API, so this might not be the most appropriate usage of useMemo since it’s probably not a particularly expensive operation, but I think it was a nice way to handle it regardless. You can learn more about the useMemo function or Hooks in general here.
Color Tile style source

Notes on the styling

The styling of our tile is really simple. We have the tile itself which takes its dimensions and color from the variables we pass in.

Then, we have the container which holds the tile, the color name, and the HEX value. It’s a simple flex container that keeps our elements aligned.

Color Picker

Color Picker Designs

For our Color Picker, we are going to reuse the Color Tile component, along with a picker from the react-color package.

Color Picker Source

Notes on the implementation

Our color picker is composed of a ColorTile which shows the currently selected color, along with its HEX value, and a ChromePicker from the react-color library which actually allows us to select a color.

We have some state which controls whether the ChromePicker is visible or not, and a callback function to let whatever component is using our picker know when the color changes. react-color provides lots of information when the color changes, but the hex value was enough for my purposes as you can see on line 17.

Color List

Color List designs

Our Color List component takes a list of colors and renders them as a list containing color tiles. Our Color List is intended to show a base color as a slightly larger tile, with the remaining tiles representing the variants of the base shown as smaller tiles. We also allow naming our list, and this will be used to display the name of the base color.

Our Color List also brings the “springy” part of this walkthrough. The tiles will be animated on entry using React Spring 😊

Color Palette List implementation

Notes on the implementation

  1. On line 34–40 you can see our implementation of React Spring using useTrail . You can read more about trails here. We animate the margin on the Color Tile container and depending on whether the list is column aligned or row aligned this could be the margin on the right or bottom.
  2. On line 39 you can see that we pass a ref to our animation. This is so that we can pass a ref to our Color List to delay the animation. This would be useful is we wanted to trigger a specific sequence of animations from a parent component.
Color Palette List styling

Color Pair

Color Pair designs

The Color Pair component takes two colors and displays them side by side along with some accessibility information. The idea is that a developer or designer would pair colors to ensure they work together when used as a background/foreground combination.

Color Pair implementation

Notes on the implementation

As mentioned, our Color Pair component takes a background and foreground color, and on line 26–33 you can see where we use Tinycolor to determine the accessibility of the color pair.

We use a simple Pill component to display the result with the type of the Pill being determined by the result. I haven’t shown the source for the Pill here, but it’s a pretty standard component that you would find in any component library (Bootstrap, Material, etc).

You can learn more about accessibility and WCAG here.

Conclusion and source code

I hope you have learned something from this walkthrough. I highly recommend looking into the libraries I have mentioned here in your next project. In particular, my application would have taken much longer to create without the excellent Tinycolor package.

Source code for the full application can be found here.

A Storybook instance with all of the components can be found here.

If you have any feedback on the designs, code, or in general, I would love to hear it in the responses.

Thank you very much for reading my article!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Stephen McLean

Written by

Software Engineer with an interest in UI/UX design. Contact: stephenmclean112@gmail.com

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade