开发了一个ripple effect组件

目前来看网上的除了material-ui的ripple-effect效果很棒以外，其余的ripple组件都不够完美。

所以开发了这个ripple effect组件，用svg实现，很容易使用，效果也很舒服。

大家快来试试手，可以提需求或者pr，来支持更多的配置，顺便点个star。

地址

安装

yarn add 'dodo-ripple'
复制代码

使用

直接当作block使用的时候，会认为是一个普通的div。

import { RippleBlock } from 'dodo-ripple'

<RippleBlock className="btn">
  Click Here
</RippleBlock>
复制代码

也可以用装饰器的方式，但是只能装饰React Element。

import { withRipple } from 'dodo-ripple'

const Button = withRipple(
  <button className="btn">Click Here</button>
)
复制代码

如果只使用ripple的话会比较麻烦，需要通过ref组件然后手动触发createRipple，并且需要手动写点样式。

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.props

    return (
      <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>
    )
  }
}
复制代码