CursorProtect

Overview

The CursorProtect component monitors mouse position, blocks specific keyboard shortcuts, and shows a full-screen protection overlay to prevent unauthorized interactions with your application.

This component is useful for protecting sensitive content from being interacted with by unauthorized users.

Features

Usage

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

import { CursorProtect } from 'react-mower';

function App() {
  return (
    <CursorProtect message="Screen Blocked">
      <YourApp />
    </CursorProtect>
  );
}

With the message attribute, you can give your own arbitrary name that will be displayed when the screen block is activated.

Props

Example

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

import React from 'react';
import { CursorProtect } from 'react-mower';

function App() {
  return (
    <div className="App">
      <CursorProtect message="Access Denied">
        <header className="App-header">
          <h1>Protected Content</h1>
          <p>This content is protected from unauthorized cursor interactions.</p>
        </header>
        <main>
          <div className="sensitive-content">
            <h2>Sensitive Information</h2>
            <p>This is sensitive information that is protected by CursorProtect.</p>
          </div>
        </main>
      </CursorProtect>
    </div>
  );
}

export default App;