watermark-component-for-react/README.md

A novel react component for watermark

## Install
``` bash
npm install --save watermark-component-for-react
```

## Usage
``` bash
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. 使用 <code>MutationObserve</code> 监视 DOM 的变动，水印不可被删除、且属性不可被修改。
2. 丰富的 props 使得水印组件可实现定制化需求。