watermark-component-for-react

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 使得水印组件可实现定制化需求。