Built a React component that encrypts copied text while keeping it readable on screen

Source: Dev.to

How it works

• Text displays normally on screen.
• When a user copies the text, the clipboard receives encrypted gibberish generated with a randomized Vigenère cipher.
• The encryption key is created fresh on each render and never exposed, making decryption impossible.

Usage

import { ProtectedText } from "react-text-protect";

function App() {
  return (
    <ProtectedText>
      This text looks normal but
      copying it produces encrypted
      output that cannot be decoded.
    </ProtectedText>
  );
}

Example copy output

Jeb lhag fdiax josfi kljpdy ftq ut peryuobv xvvrf

Why this approach

• No broken right‑click menus or accessibility issues.
• Cannot be bypassed with the browser’s inspect element.
• Maintains normal text behavior for users.
• Zero dependencies, ~2 KB bundle size.

Use cases

• Online exams & assessments
• Blocking AI scrapers
• Proprietary documentation
• Any content that needs to be readable but not copyable

Installation & links

npm install react-text-protect

Feedback welcome!