react-block-devtools

Client-side optional production guard for React apps:

• Blocks context menu (right click)
• Blocks common DevTools keyboard shortcuts (F12, Ctrl+Shift+I/J/C/K, Cmd+Option+I/J/C, Ctrl+U)
• Heuristic “docked DevTools” detection via outerWidth/Height vs innerWidth/Height, then runs your redirect callback

This does not securely hide assets or secrets. Treat it as UX friction only.

Install

npm install react-block-devtools

Peer deps: react, react-dom. Subpath react-block-devtools/react-router also needs react-router-dom v6+.

React Router (SPA)

import { BlockDevtoolsRouterGuard } from "react-block-devtools/react-router";

<BrowserRouter>
  <BlockDevtoolsRouterGuard
    enabled={import.meta.env.VITE_ENV === "production"}
    fallbackPath="/"
  />
  <Routes>...</Routes>
</BrowserRouter>

Hook (any router or no router)

import { useBlockDevtools } from "react-block-devtools";

useBlockDevtools({
  enabled: import.meta.env.PROD,
  onDevToolsDetected: () => {
    if (window.history.length > 1) window.history.back();
    else window.location.replace("/");
  },
});

Vanilla (no React)

import { installBlockDevtools } from "react-block-devtools";

const stop = installBlockDevtools({
  enabled: true,
  onDevToolsDetected: () => window.history.back(),
});
// stop();

About npx

npx runs packages that expose a bin CLI. This library is meant to be npm install’d. If you need npx your-package init, add a separate CLI package or a bin field that scaffolds files.