Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBRipple on command?

bmurphy premium asked 11 months ago


I was wondering if it was possible to programatically cause an MDBRipple component to ripple other than by clicking it? I see that it has an optional "ref" prop, but I have not been successful in using that to generate the ripple effect.

Expected behavior MDBRipple's ripple effect can be triggered programatically by doing something other than clicking on it

Actual behavior It is unclear to me whether it is possible to do this.

Resources (screenshots, code snippets etc.)


Mateusz Lazaru staff answered 11 months ago


It's not possible to run it in the other way than a mousedown, but there is a workaround which will do the job for most cases:

import React, { useEffect, useRef } from 'react';
import { MDBRipple } from 'mdb-react-ui-kit';

export default function App() {
  const rippleRef = useRef(null);
  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      const mouseDownEvent = new MouseEvent('mousedown', {
        bubbles: true,
        clientX: rippleRef.current?.clientWidth / 2,
        clientY: rippleRef.current?.clientHeight / 2,
      });
      rippleRef.current?.dispatchEvent(mouseDownEvent);
    });
  }, []);

  return (
    <MDBRipple ref={rippleRef} rippleTag='a' href='/'>
      <img alt='example' className='img-fluid rounded' src='https://mdbootstrap.com/img/new/standard/city/043.webp' />
    </MDBRipple>
  );
}

Since mousedown does not trigger submit or redirect when a link is targeted, I think it shouldn't have any unexpected impact on your app, and can be used safely.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.3.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No