Examples

Basic Examples

These examples show simple use cases for React Mower components.

DevToolsBlocker Example

A simple example of using the DevToolsBlocker component to block developer tools access:

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>
);

CursorProtect Example

An example of using the CursorProtect component to prevent cursor-based interactions:

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>
      </CursorProtect>
    </div>
  );
}

GitHubStarCount Example

An example of using the GitHubStarCount component to display a GitHub star button:

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Project</h1>
        <p>If you like this project, please star it on GitHub:</p>
        <GitHubStarCount githubStar="jasurhaydarovcode/react-mower" />
      </header>
    </div>
  );
}

Combining Components

You can combine multiple React Mower components to create a comprehensive protection solution:

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

function App() {
  return (
    <DevToolsBlocker>
      <div className="App">
        <header className="App-header">
          <h1>Protected Application</h1>
          <GitHubStarCount githubStar="jasurhaydarovcode/react-mower" />
        </header>
        <main>
          <CursorProtect message="Sensitive Content Protected">
            <div className="sensitive-content">
              <h2>Sensitive Information</h2>
              <p>This content is protected from unauthorized access.</p>
            </div>
          </CursorProtect>
          <div className="public-content">
            <h2>Public Information</h2>
            <p>This content is accessible to all users.</p>
          </div>
        </main>
      </div>
    </DevToolsBlocker>
  );
}

In this example, the entire application is protected by DevToolsBlocker, the sensitive content section is additionally protected by CursorProtect, and the header includes a GitHub star button.