Feedback

Watermark

Add a canvas-rendered watermark over any content area, with full control over text, rotation, opacity, and spacing.

Watermark is rendered over this area

Installation

npx benflux-ui add watermark

Usage

import { Watermark } from "@benflux-ui/react"

<Watermark
  content="Confidential"
  rotate={-22}
  gap={[80, 60]}
  font={{ fontSize: 14, color: "rgba(0,0,0,0.12)", fontWeight: "bold" }}
>
  <YourContent />
</Watermark>

// Multi-line text
<Watermark content={["Internal", "Do not share"]} gap={[100, 80]}>
  <YourContent />
</Watermark>

Props

Prop	Type	Default	Description
content*	string \| string[]	—	Watermark text — array for multi-line
rotate	number	-22	Rotation angle in degrees
gap	[number, number]	[100, 100]	Horizontal and vertical spacing between watermarks
offset	[number, number]	—	Position offset from the top-left corner
font	{ fontSize?: number; color?: string; fontWeight?: string; fontFamily?: string }	—	Font options for the watermark text
image	string	—	Image URL to use instead of text
width	number	—	Image width when using image watermark
height	number	—	Image height when using image watermark