Create that Component #2

This is a series where I design and code various common UI components with React and <place CSS solution here>.

Material Design has been extremely popular for many years and one of the coolest effects it introduced was the ripple effect that provides an attractive visual feedback to the user when an element is clicked / tapped.

If you don’t know what the ripple effect is — it looks something like this:

Last time we created a ToggleSwitch component that used this kind of ripple effect to make the toggling animation a bit more fancy looking. After that article I’ve encountered numerous situations where I needed / wanted to use the same ripple effect in some other component, and that’s why I decided to separate the ripple effect into it’s own Higher-Order component that can be easily used with any styled component.

Recently I’ve been using styled-components a lot and that’s why I used it to create the HOC for the ripple effect. So, without further rambling here’s the code for the HOC:

Pretty simple, right?

To be totally honest I basically copy-pasted the pure CSS implementation of the ripple effect from this Github repo and just wrapped it inside a styled div and used the React HOC pattern. So, all credit for the effect goes to the original creators 🙏

Okay, let’s see how we can use this HOC:

And when we render these blocks and click them it looks like this:

That’s it! If you are using styled-components you can easily enhance any normal or styled React component with the withRipple HOC and get the effect without much hassle.

Feel free to use the Gist above as you please! 😎

We are hiring!

Do you want to build exciting and interesting apps with modern web technologies? Check out our open positions and join us at Taito United!

Can’t find positions directly suitable for you? Feeling adventurous? Send your resume and an open application to jobs@taitounited.fi — we are more than happy to hear you out and see what you got cooking 🍳