Material-UI v3: How do you use the TouchRipple component?

Question

I'm trying to get Material UI's TouchRipple component to work so that I can use the ripple effect at times outside of the ButtonBase component. The docs, however, say nothing about how to use it.

In older versions of Material UI, it seems you are supposed to just wrap it around the React component but in v3, it doesn't work as it doesn't take any children.

How do you use the TouchRipple component in Material UI v3?

Answer 1

Update for v4 — 3 of July 2019

createRippleHandler is no more. Still, ButtonBase is the best tool for what the question is asking for.

It’s not exactly a simple utility to use.

If you have a look at ButtonBase you’ll see that there are a lot of required things to make it work.

Basically you need to manually handle the events and ask the TouchRipple to start a new ripple.

They made @material-ui/core/ButtonBase/createRippleHandler (used indeed in ButtonBase) to make their life easier.

Do not recommend. Use ButtonBase instead.