Add watermark to react components in a more elegant way

Watermark-enhancer

Add watermark to react components in a more elegant way.

1.Install

npm i watermark-enhancer -d

2.Use

import EnhancerWaterMark from 'watermark-enhancer'
export default EnhancerWaterMark({
  width: '100',
  height: '80',
  rotate: '17',
}, true, renderEffectContent)(WrappedComponent)

3.notice

参数说明

EnhancerWaterMark(
  options = {}, // 水印参数, 水印内容可异步获取
  needEffectContent = false, // 判断水印是否需要异步获取
  effectContentFunc, // 异步获取水印内容的方法, 需返回一个Promise
)(WrappedComponent) // 传入需要加上水印的组件

同步的水印内容

EnhancerWaterMark(
  options = {
    + content: '水印',
    width,
    height,
    ...  
  }, 
)(WrappedComponent)

异步的水印内容

EnhancerWaterMark(
  - content  
  options = {
    width,
    height,
    ...  
  }, 
  + true, // 代表需要异步获取水印内容
  + effectContentFunc
)(WrappedComponent)

Watermark-enhancer

GitHub