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.

Leporid

The TouchRipple component uses a div, so there's no problem in using it to wrap a button element. – Infatuate

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

Ripplet

Wow! Thanks a ton. – Rill

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;

Phillada

Worked on my end – Specify

I know this is obvious out of context, but you may want to check your theme for something like this inside components: ` MuiButtonBase: { defaultProps: { disableRipple: true, }, }, ` … in which case you'll need to overwrite this one time use with disableRipple={false} prop to ButtonBase. – Parrisch

Answer 3

The top answer here is great but I think it can be done better since MUI provides a hook that simplifies the things.

You can implement it by the following way:

import TouchRipple from '@mui/material/ButtonBase/TouchRipple';
import useTouchRipple from '@mui/material/useTouchRipple';
import { Collapse, Divider, Paper, useTheme } from '@mui/material';
import React from 'react';

const App = () => {
  const rippleRef = React.useRef(null);
  const { getRippleHandlers } = useTouchRipple({
    disabled: false,
    focusVisible: false,
    rippleRef,
  });

  return (
    <div
      style={{
        position: "relative",
      }}
      {...getRippleHandlers()}
    >
      <TouchRipple ref={rippleRef} center={false} />

      <Typography>Button</Typography>
    </div>
  );
}

I also noticed that if you don't provide position: relative then it ripple effect will be on the whole screen instead of the component you're trying to do so.

Moniquemonism