0.5.0 • Published 2 years ago
@hirohe/react-watermark v0.5.0
React Watermark Component
A React Component to wrap watermark text on child component, using generated svg as background-image
Doc
Usage:
this Component requires react version >=16.8.0, in order to use the react hook feature
yarn add @hirohe/react-watermark
# or
npm i --save @hirohe/react-watermarke.g.
import { Watermark } from '@hirohe/react-watermark';
const ContentWithWatermark = () => (
<Watermark text="Mark">
<div style={{ width: 500, height: 500, backgroundColor: '#5f5f5f' }}>
Lorem ipsum
</div>
</Watermark>
)
Props
| prop | description | type | default |
|---|---|---|---|
| show | show watermark or not | boolean | true |
| text | watermark text | string | - |
| textColor | color of watermark | color string | #cccccc |
| textSize | watermark text size in px unit | number | 24 |
| fontFamily | watermark text font-family | string | Arial, Helvetica, sans-serif |
| lineHeight | watermark text lineHeight | string | '1.2rem' |
| multiline | whether text is multiline or not | boolean | false |
| opacity | watermark text opacity | number | 0.2 |
| rotate | watermark text rotate degree | number | -45 |
| gutter | gutter between watermark text | number | 0 |
| wrapperStyle | style of wrapper | CSSProperties | - |
| wrapperElement | element of wrapper | React.ElementType | 'div' |
TODO
- multiline watermark text
- adjustable space between watermark
License
MIT License. See LICENSE.txt for more information.