So far, the ripple components on the web are not perfect except for the ripple-effect of The Material – UI.

So we developed this Ripple Effect component, implemented in SVG, which is very easy to use and comfortable. Everyone come and try it, you can raise requirements or PR, to support more configurations, by the way, click star.

address

Making address github.com/soWhiteSoCo…

Project demonstration sowhitesocoll. Making. IO/tonight.but – ripple…

The installation

yarn add 'dodo-ripple'
Copy the code

use

When used directly as a block, it is thought of as a normal div.

import { RippleBlock } from 'dodo-ripple'

<RippleBlock className="btn">
  Click Here
</RippleBlock>
Copy the code

You can also use decorators, but only React Elements.

import { withRipple } from 'dodo-ripple'

const Button = withRipple(
  <button className="btn">Click Here</button>
)
Copy the code

Using ripple alone is a bit more cumbersome, requiring the ref component to trigger the createRipple manually and writing some styles manually.

import { Ripple } from 'dodo-ripple'

class Button extends React.Component {
  $ripple = React.createRef()

  handleMouseDown = e => {
    this.$ripple.current.createRipple(e)
    this.props.onMouseDown && this.props.onMouseDown(e)
  }

  render() { const { children, className, ... rest } = this.propsreturn( <button {... rest} className={classnames('btn'.'do-ripple-block', className)} 
        onMouseDown={this.handleMouseDown} 
      >
        <span className="do-ripple-content">{children}</span>
        <Ripple ref={this.$ripple} rippleColor="#39f"/>
      </button>
    )
  }
}
Copy the code