Topic: MDBRipple on command?
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.)
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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