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

Made react-text-protect to solve a problem on my educational platform - students copying exam questions to share or feed into AI tools.
How it works:
Text displays normally, but copying it outputs encrypted gibberish using a randomized Vigenère cipher. The encryption key is generated fresh on each render and never exposed, making it impossible to decrypt.

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>
  );
}

Copy output:

*Jeb lhag fdiax josfi kljpdy ftq ut peryuobv xvvrf
*

Why this approach:

No broken right-click menus or accessibility issues
Can't be bypassed with inspect element
Maintains normal text behavior
Zero dependencies, ~2KB

Use cases:

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

Check it out: npm install react-text-protect
Check out the site: https://text-protect.vercel.app/
Feedback welcome!