開發了一個ripple effect組件

目前來看網上的除了material-ui的ripple-effect效果很棒之外，其他的ripple組件都不夠完美。

因此開發了這個ripple effect組件，用svg實現，很容易使用，效果也很舒服。
你們快來試試手，能夠提需求或者pr，來支持更多的配置，順便點個star。

地址

github地址
github.com/soWhiteSoCo…

項目演示
sowhitesocoll.github.io/dodo-ripple…

安裝

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>
    )
  }
}
複製代碼