Component

Content Protection

A wrapper that adds watermark overlays and optional copy/right-click protection. Uses the headless @refraction-ui/content-protection core.

Examples

Content with a watermark overlay.

Protected Content

This content has a watermark overlay. Right-click and copy protection can also be enabled.

Installation

$pnpm add @refraction-ui/react-content-protection

Usage

tsx

import { ContentProtection } from '@refraction-ui/react-content-protection'
export function MyComponent() {
  return (
    <ContentProtection watermark={{ text: 'CONFIDENTIAL', opacity: 0.1 }}>
      <p>Protected content here</p>
    </ContentProtection>
  )
}

Props

Prop	Type	Default	Description
`watermark`	`WatermarkConfig`	--	Watermark config with text and opacity.
`disableCopy`	`boolean`	`false`	Disable text copying.
`disableRightClick`	`boolean`	`false`	Disable right-click menu.
`children`	`ReactNode`	--	Protected content.
`className`	`string`	--	Additional CSS classes.