react-mower
v1.3.23
Published
Protect your React application from DevTools and unwanted cursor actions
Downloads
1,541
Maintainers
Readme
React Mower
A powerful React package for protecting your web applications from unwanted developer tools access and cursor-based interactions.
Features
- 🛡️ Block Developer Tools access
- 🖱️ Cursor protection
- 📸 Block screenshot
- ⚡ Lightweight and easy to use
- 🔳 Github Star Button Count
- 🔒 Multiple protection layers
Installation
npm install react-mower
This package requires react-toastify as a peer dependency, and you only need to install react-mower
Usage
Basic Setup
Loading in the main.tsx
component
DevTools Blocker Only
using main.tsx
import 'react-toastify/dist/ReactToastify.css';
import { DevToolsBlocker } from 'react-mower';
<DevToolsBlocker>
<App />
</DevToolsBlocker>
);
Using Individual Components
Cursor Protection Only
import { CursorProtect } from 'react-mower';
function App() {
return (
<CursorProtect message='❌ Screen Blocked'>
<YourApp />
</CursorProtect>
);
}
message
With the message attribute, you can give your own arbitrary name when the screen block is on
Using for Code Example
| Tablets | Import | Props |
|---------------------|--------------------|-------------|
| Cursor Protect | <CursorProtect>
| {message} |
| Github Star Button Count | <GitHubStarCount />
| {githubStar}, username/repo |
Components
DevToolsBlocker
Prevents access to browser developer tools through:
F12 key blocking Ctrl+Shift+I blocking Right-click context menu blocking DevTools window size detection
Security Features
DevTools Protection:
Blocks common DevTools shortcuts Prevents right-click context menu Detects DevTools through window size changes Shows warning toast messages
Cursor Protection:
Monitors mouse position Blocks specific keyboard shortcuts Shows full-screen protection overlay Prevents unauthorized interactions
Browser Compatibility
Chrome (latest) Firefox (latest) Safari (latest) Edge (latest) Opera (latest)
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request
Support
If you have any questions or need help integrating the package, please open an issue in the GitHub repository.