Install

npm install --save watermark-component-for-react

Usage

import React from 'react';
import WaterMark from 'watermark-component-for-react';
import * as styles from './index.css';

class ReactDemo extends React.Component{
  render () {
    const content = `内部文档，请勿外传 by-前端小黑`;
    return (
      <WaterMark content={content}>
        <div className={styles.wrapper}>hello world</div>
      </WaterMark>
    );
  }
}
export default ReactDemo;

Props

| 成员 | 说明 | 类型 | 默认值 | | ----- | :--------: | :---------: | :---------: | | style | watermark最外层组件内联样式 | undefined | object | undefined | | container | 容器 | HTMLDivElement | document.body | | width | canvas元素宽 | string | 300 | | height | canvas元素高 | string |200 | | textAlign | 绘制文本的对齐方式 | string |left | | textBaseline | 文本基准线 | string | bottom | | font | 字体大小及样式 | string | 16px Microsoft Yahei | | fillStyle | 自定义水印的颜色 | string | black | | content | 水印内容 | string | 内部文档，请勿外传 | | globalAlpha | 设置图形和图像透明度的值 | number | 0.1 | | rotate | 文字旋转角度 | number | 16 | | zIndex | 元素堆叠顺序 | number | 1000 |

Feature

1. 使用 MutationObserve 监视 DOM 的变动，水印不可被删除、且属性不可被修改。
2. 丰富的 props 使得水印组件可实现定制化需求。