hirohe/react-watermark

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

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.

react-watermark's Issues

FC needs a definition of children

In React18, children type is removed from React.FC.

So WatermarkProps needs a definition of children

Watermark throws Hydration Error on NextJs

Details of error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

next-dev.js?3515:20 Warning: Prop style did not match. Server: "pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;background-repeat:repeat;z-index:1" Client: "pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;content:;background-repeat:repeat;z-index:1;background-image:"
at div
at div
at Watermark (webpack-internal:///./node_modules/@hirohe/react-watermark/build/index.esm.js:68:17)

Wondering if you have any guidance here? Thanks!