hirohe/react-watermark

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

react-watermark's Issues

Feature request

Suggested features

prop	description
wrapperClass	Classname(s) for wrapper element
watermarkImageElement	Changes the watermark element to a different type, because div shouldn't be a descendant of a wrapperElement that is an inline element, <p>, etc.

• The ability to render watermark with <canvas /> instead of data url.

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!

FC needs a definition of children

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

So WatermarkProps needs a definition of children