@workwithmast/anchor-watermark

Reusable inline watermark overlay component for branding customer software projects.

Installation

npm install @workwithmast/anchor-watermark

Usage

React (Web)

import { Watermark } from "@workwithmast/anchor-watermark";

function App() {
  return (
    <div style={{ width: 600, height: 400 }}>
      <Watermark>
        <h1>Your App Content</h1>
      </Watermark>
    </div>
  );
}

React Native

import { Watermark } from "@workwithmast/anchor-watermark/native";

function App() {
  return (
    <Watermark>
      <YourApp />
    </Watermark>
  );
}

Astro

---
import Watermark from "@workwithmast/anchor-watermark/astro";
---

<Watermark>
  <YourApp />
</Watermark>

Props

| Prop | Type | Default | Description | |---|---|---|---| | src | string | AnchorWaterMarks.png (base64) | Watermark image URL | | opacity | number | 0.12 | Base opacity | | hoverOpacity | number | 0.35 | Opacity on hover | | width | string | "100%" | Container width | | maxWidth | string | "300px" | Max width of the watermark image | | zIndex | number | 0 | Z-index within container | | rotation | number | -15 | Rotation in degrees | | hoverColor | string | "#69867E" | Drop shadow color on hover | | disableHover | boolean | false | Disable hover effects | | className | string | — | Additional CSS class (web only) | | style | CSSProperties | — | Additional inline styles |

License

MIT