Basic Setup

Setting up in main.tsx/jsx

After installing React Mower, you need to set it up in your main file. Here's how you can do it:

First, import the necessary styles and components:

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

Then, wrap your main app component with the DevToolsBlocker component:

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

This setup will block developer tools access in your entire application.

Using individual components

If you want to use individual components instead of wrapping your entire application, you can import and use them separately. For example, to use the CursorProtect component:

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 when the screen block is on.

Using GitHub Star Button

You can also use the GitHubStarCount component to display a GitHub star button:

import { GitHubStarCount } from 'react-mower';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <GitHubStarCount githubStar="username/repo" />
    </div>
  );
}

Replace username/repo with your GitHub repository name.

Component Usage Table