DevToolsBlocker

Overview

The DevToolsBlocker component prevents access to browser developer tools through various methods:

• F12 key blocking
• Ctrl+Shift+I blocking
• Right-click context menu blocking
• DevTools window size detection

This component is useful for protecting your web application from unauthorized access and preventing users from inspecting or modifying your code through developer tools.

Usage

To use the DevToolsBlocker component, you need to import it and wrap your application with it:

import 'react-toastify/dist/ReactToastify.css';
import { DevToolsBlocker } from 'react-mower';

function App() {
  return (
    <DevToolsBlocker>
      {/* Your app content */}
    </DevToolsBlocker>
  );
}

When a user tries to access developer tools, the component will detect it and display a warning toast message.

Custom Style Toast:

import { DevToolsBlocker } from 'react-mower';

<DevToolsBlocker
  toastOptions={{
  position: "bottom-right",
  autoClose: 3000,
  closeOnClick: false,
  pauseOnHover: true,
  color: "#ff9800"
}}
>
  <App />
</DevToolsBlocker>
    

Features

Props

The DevToolsBlocker component currently does not accept any props other than children. More customization options will be available in future releases.

Example

Here's a complete example of how to use the DevToolsBlocker component in a React application:

import React from 'react';
import ReactDOM from 'react-dom';
import { DevToolsBlocker } from 'react-mower';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <DevToolsBlocker>
      <App />
    </DevToolsBlocker>
  </React.StrictMode>
);