CODEWITHSUNDEEP
reactjsmaterial-ui
Aero Wang
Aero Wang

Reputation: 9247

How to add ink/ripple effect to an element?

For example if I have an albums.jsx file in which I wrote:

import ripple from 'material-ui/ripple'

then in my element I can use:

return <div className={ripple}><div>

So that this div will have ink/ripple effect. This can be done in Angular Material via a class name, so I imagine there should be a similar feature in Material-UI/react-md

Upvotes: 0

Views: 923

Answers (1)

Denialos
Denialos

Reputation: 1006

You have to import it like this:

import TouchRipple from 'material-ui/internal/TouchRipple';

Then use in your component like this (TouchRipple is basically a higher-order component):

<TouchRipple>
   <div>
    MY RIPPLING DIV
  </div>
</TouchRipple>

If you need to solve the problem with classNames instead of a HOC, I suggest to use react-materialize -> https://react-materialize.github.io/#/

Upvotes: 2

Related Questions