DEV Community

Discussion on: Recreating the material design ripple effect in React

Collapse
 
dustinkiselbach profile image
dustinkiselbach

This looks great and works well. Thank you. Is it possible to register onclick events through the ripple container? I would like to be able to click through the container so that I can register specific onclick functions to different components behind the ripple container.

Collapse
 
rohanfaiyazkhan profile image
Rohan Faiyaz Khan

Hi thank you for the response! I am not sure what you mean by clicking through the ripple container. I wasn't initially envisioning any other components inside it. Can you give me an example of what you are trying to do?

Collapse
 
dustinkiselbach profile image
dustinkiselbach

Basically I would like to have the ripple effect over an entire component, with sub components inside with different onclick functions. Would this be possible?

Thread Thread
 
rohanfaiyazkhan profile image
Rohan Faiyaz Khan

Oh yeah absolutely. You actually don't need to nest the children inside the ripple in that case. You would do something like this:

<ParentComponent>
   <ChildButton onClick={someHandler} />
   <Ripple />
</ParentComponent>

You might want to be a little concious of the event bubbling if you are using this approach.

Thread Thread
 
dustinkiselbach profile image
dustinkiselbach

Thanks so much!