Components

Explore the components provided by React Mower.

React Mower provides several components that you can use to protect your web applications. Each component serves a specific purpose and can be used independently or in combination with others.

DevToolsBlocker

Prevents access to browser developer tools through key blocking, context menu blocking, and window size detection.

Learn More

CursorProtect

Monitors mouse position, blocks specific keyboard shortcuts, and shows a protection overlay to prevent unauthorized interactions.

Learn More

GitHubStarCount

Displays a GitHub star button to promote your repository and track user engagement.

Learn More

Component Usage

React Mower components can be used together or separately, depending on your needs. Here's a quick guide on how to use them:

Using All Components

To use all components together, you can wrap your application with the DevToolsBlocker component and include the CursorProtect and GitHubStarCount components as needed:

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

function App() {
  return (
    <DevToolsBlocker>
      <CursorProtect message="Screen Blocked">
        <div>
          <h1>My Protected App</h1>
          <GitHubStarCount githubStar="username/repo" />
          {/* Your app content */}
        </div>
      </CursorProtect>
    </DevToolsBlocker>
  );
}

Using Individual Components

Each component can also be used independently. For example, if you only want to block developer tools:

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

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

DevToolsBlocker Back to Basic Setup