React Watermark Component

A React Component to wrap watermark text on child component, using generated svg as background-image

Doc

Storybook

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-watermark

e.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.