react-devtools-blocker/README.md

[](https://www.npmjs.com/package/react-devtools-blocker) [](https://github.com/y

# 🛡️ DevTools Guard

[![npm version](https://img.shields.io/npm/v/react-devtools-blocker.svg?style=flat-square)](https://www.npmjs.com/package/react-devtools-blocker)
[![license](https://img.shields.io/npm/l/react-devtools-blocker.svg?style=flat-square)](https://github.com/yourusername/react-devtools-blocker/blob/main/LICENSE)

A React/Next.js component to detect and block browser DevTools access, with instant redirection to a safe page.

> Developed with ❤️ by [Pressbuddy Software Solutions](https://pressbuddy.in)

---

## 🚀 Grow Your Business with Us

We offer end-to-end digital services to grow your business:

- 💻 Website & Web App Development  
- 📱 Mobile App Development (React Native / Flutter)  
- 🛒 E-commerce Solutions  
- 🧠 Custom Software & Automation Tools  
- 🎨 UI/UX Design  
- ☁️ Cloud Hosting & DevOps  
- 🧾 Billing & Inventory Software  

📞 **Contact us for your next project:** [pressbuddy.in/contact](https://pressbuddy.in/contact) | +91 9922852793

---

## 📑 Table of Contents

- [Grow Your Business with Us](#-grow-your-business-with-us)
- [Features](#-features)
- [Installation](#-installation)
- [Usage](#-usage)
- [Props](#-props)
- [Use Cases](#-use-cases)
- [Limitations](#-limitations)
- [Contributing](#-contributing)
- [License](#-license)

---

## 🚀 Features

- Detects browser DevTools using multiple methods (window dimensions, debugger traps)
- Instant redirect to custom URL when DevTools is detected
- Lightweight and framework compatible (React, Next.js, etc.)
- Simple plug-and-play implementation
- TypeScript support included

## 📦 Installation

### Using npm

```bash
npm install react-devtools-blocker
```

### Using yarn

```bash
yarn add react-devtools-blocker
```

## 🧠 Usage

> **Note for Next.js 13+**  
> This package must be used inside a [Client Component](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive).  
> Add `"use client"` at the top of your component file.

### Basic Implementation

```jsx
import DevToolsGuard from 'react-devtools-blocker';

function App() {
  return (
    <>
      <DevToolsGuard redirectUrl="/blocked-page" />
      {/* Your app content */}
    </>
  );
}
```

### Next.js App Router (Client Component)

```jsx
"use client";

import DevToolsGuard from 'react-devtools-blocker';

export default function Layout({ children }) {
  return (
    <>
      <DevToolsGuard />
      {children}
    </>
  );
}
```

## ⚙️ Props

| Prop           | Type    | Required | Default                      | Description                                 |
|----------------|---------|----------|------------------------------|---------------------------------------------|
| `redirectUrl`  | string  | No       | "https://www.google.com"     | URL to redirect when DevTools are detected  |
| `debug`        | boolean | No       | false                        | Enables console logs for debugging          |

## 🔐 Use Cases

Protect sensitive applications like:
- Online exams/testing platforms
- Digital product access
- Game logic protection
- Client-side business logic
- Anti-cheat mechanisms

## ⚠️ Limitations

- Not 100% foolproof (no client-side solution can be)
- May trigger on mobile devices with unusual screen ratios
- Can be bypassed by determined users

<!-- ## 🧑‍💻 Development

```bash
# Clone repository
git clone https://github.com/yourusername/react-devtools-blocker.git

# Install dependencies
npm install

# Run dev server
npm run dev
``` -->

## 🤝 Contributing

Pull requests are welcome! Please open an issue first to discuss changes.

## 📃 License

MIT © [Pressbuddy Software Solutions](https://pressbuddy.in)