A React hook that detects if DevTools is open
npm install react-devtools-detector> A React hook that detects if DevTools is open.
``bash`
bun add react-devtools-detectoror
npm install react-devtools-detectoror
yarn add react-devtools-detectoror
pnpm add react-devtools-detector
Easily integrate the detector into your React application:
`tsx
import useIsDevToolsOpen from 'react-devtools-detector'
function App() {
const isDevtoolsOpen = useIsDevToolsOpen()
return
For advanced configurations:
`tsx
import useIsDevToolsOpen from 'react-devtools-detector'function App() {
const isDevtoolsOpen = useIsDevToolsOpen({
interval: 1000,
enabled: process.env.NODE_ENV !== 'development',
})
return
{isDevtoolsOpen ? 'DevTools is open' : 'DevTools is closed'}
}
`📘 API Reference
$3
Parameters:
-
options (optional):
- interval: Interval in milliseconds to check if DevTools is open. Defaults
to 500ms.
- enabled: Flag to enable or disable the detector. Defaults to true.Returns:
- Boolean value indicating the status of DevTools (
true if open, false
otherwise).⚠️ Important Note
It's highly recommended to disable detection during development
(
enabled: false`). The detection process clears the entire console, which couldThe hook relies on heuristic methods to determine the status of DevTools,
ensuring a high but not absolute accuracy. The core detection functionality is
powered by devtools-detector.
MIT © Abdulaziz Aljadaan