React Content Protection

Overview

React Content Protection is an npm package for React apps that need to make their content harder to lift. Wrap your app (or just the sensitive parts) and it blocks text selection and copying, right-click menus, printing, common shortcuts like save and view-source, and attempts to open developer tools.

Every protection can be switched on or off through a single config, and protection can be enabled conditionally — for example, letting admins copy while regular users cannot. It works with plain React and the Next.js App Router.

The Problem

Paid courses, exam portals and proprietary dashboards often need basic content protection, but wiring up dozens of browser event listeners in every project is repetitive and easy to get wrong.

Key Features

• Blocks copy/paste and text selection
• Disables the right-click context menu
• Blanks the page on print attempts
• Blocks shortcuts like Ctrl+S, Ctrl+P and Ctrl+U
• Detects and blocks developer tools and debuggers
• Detects automated browsers such as Selenium and Puppeteer
• Per-option config, conditional protection and off-by-default in local development
• Works with React 16.8+ and the Next.js App Router

Tech Stack

React, TypeScript, tsup, npm

Links

• npm
• GitHub