Is it possible to use the touch ripple effect of MUI on a div?

Question

I have read different answers of similar questions, but they are all old and don't seem to work in the latest version of MUI.

I need to apply the touch ripple effect on a div, but I can't use a button or a ButtonBase element because there is another button inside it.

Thanks in advance for the reply.

Answer 1

Yes, you can use TouchRipple to emulate the ripple effect. This component is undocumented, but you can see how it's used in the ButtonBase and learn to use it yourself.

First, you need to pass a ref to TouchRipple and call ref.current.start(e) or ref.current.stop(e) when you want to start or stop the effect respectively.

e is the event object. When you call start(e), it needs the mouse or touch position (from mousedown or touchstart event) to know where to start the ripple effect (Source). You can override this behavior by setting center props to true, which makes the ripple effect always start at the middle.

Below is the minimum working example to get you started:

function App() {
  const rippleRef = React.useRef(null);
  const onRippleStart = (e) => {
    rippleRef.current.start(e);
  };
  const onRippleStop = (e) => {
    rippleRef.current.stop(e);
  };

  return (
    <div
      onMouseDown={onRippleStart}
      onMouseUp={onRippleStop}
      style={{
        display: "inline-block",
        padding: 8,
        position: "relative",
        border: "black solid 1px"
      }}
    >
      Button
      <TouchRipple ref={rippleRef} center={false} />
    </div>
  );
}

Live Demo

Answer 2

You Can Use ButtonBase API

With ButtonBase API you can pass component prop as div or any component you want

For Eg.

import { ButtonBase, Typography } from "@mui/material";

const App = () => {
  return (
    <ButtonBase component="div">
        <Typography fontSize="1.2rem">Hello, I'm a div with MUI Ripple Effect!</Typography>
    </ButtonBase>
  )
}

export default App;