目前来看网上的除了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>
)
}
}
复制代码