@uiw/react-watermark/esm/index.js

React Monorepo Template.

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["prefixCls", "text", "className", "markClassName", "markStyle", "content", "rotate", "image", "gapX", "gapY", "width", "height", "offsetLeft", "offsetTop", "fontSize", "fontFamily", "fontWeight", "fontColor", "fontStyle"];
import React, { forwardRef, useEffect, useState } from 'react';
import WatermarkJS from '@uiw/watermark.js';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
function FancyWatermark(props, ref) {
  var {
      prefixCls = 'w-watermark',
      className,
      markClassName,
      markStyle,
      content,
      rotate,
      image,
      gapX = 212,
      gapY,
      width = 120,
      height,
      offsetLeft,
      offsetTop,
      fontSize,
      fontFamily,
      fontWeight,
      fontColor,
      fontStyle
    } = props,
    other = _objectWithoutPropertiesLoose(props, _excluded);
  var style = _extends({}, props.style, {
    position: 'relative'
  });
  var wrapperCls = [prefixCls + "-wrapper", className].filter(Boolean).join(' ');
  var waterMakrCls = [prefixCls, markClassName].filter(Boolean).join(' ');
  var [base64Url, setBase64Url] = useState('');
  useEffect(() => {
    var water = new WatermarkJS({
      content,
      rotate,
      image,
      gapX,
      gapY,
      width,
      height,
      offsetLeft,
      offsetTop,
      fontSize,
      fontFamily,
      fontWeight,
      fontColor,
      fontStyle
    });
    water.create().then(base64String => setBase64Url(base64String)).catch(() => {});
  }, [content, rotate, image, gapX, gapY, width, height, offsetLeft, offsetTop, fontSize, fontFamily, fontWeight, fontColor, fontStyle]);
  var watermarkStyle = _extends({
    position: 'absolute',
    top: 0,
    left: 0,
    zIndex: 9,
    width: '100%',
    height: '100%',
    backgroundSize: gapX + width + "px",
    backgroundRepeat: 'repeat'
  }, markStyle, {
    pointerEvents: 'none'
  });
  watermarkStyle.backgroundImage = "url(" + base64Url + ")";
  return /*#__PURE__*/_jsxs("div", _extends({
    ref: ref
  }, other, {
    className: wrapperCls,
    style: style,
    children: [props.children, /*#__PURE__*/_jsx("div", {
      style: watermarkStyle,
      className: waterMakrCls
    })]
  }));
}
var Watermark = /*#__PURE__*/forwardRef(FancyWatermark);
export default Watermark;