Document React usage (#70)

devbymak · sindresorhus · web-flow · commit 38ab02f8c8ae · 2024-04-23T20:13:10.000+07:00
Co-authored-by: Sindre Sorhus &lt;sindresorhus@gmail.com&gt;
diff --git a/readme.md b/readme.md
@@ -18,22 +18,56 @@ npm install devtools-detect
 
 ```html
 <script type="module">
-	import devtools from './node_modules/devtools-detect/index.js';
+import devtools from './node_modules/devtools-detect/index.js';
 
-	// Check if it's open
-	console.log('Is DevTools open:', devtools.isOpen);
+// Check if it's open
+console.log('Is DevTools open:', devtools.isOpen);
 
-	// Check it's orientation, `undefined` if not open
-	console.log('DevTools orientation:', devtools.orientation);
+// Check it's orientation, `undefined` if not open
+console.log('DevTools orientation:', devtools.orientation);
 
-	// Get notified when it's opened/closed or orientation changes
-	window.addEventListener('devtoolschange', event => {
-		console.log('Is DevTools open:', event.detail.isOpen);
-		console.log('DevTools orientation:', event.detail.orientation);
-	});
+// Get notified when it's opened/closed or orientation changes
+window.addEventListener('devtoolschange', event => {
+	console.log('Is DevTools open:', event.detail.isOpen);
+	console.log('DevTools orientation:', event.detail.orientation);
+});
 </script>
 ```
 
+## React usage
+
+```jsx
+import {useState, useEffect} from 'react';
+import devtoolsDetect from 'devtools-detect';
+
+export function useDevToolsStatus() {
+	const [isDevToolsOpen, setIsDevToolsOpen] = useState(devtoolsDetect.isOpen);
+
+	useEffect(() => {
+		const handleChange = event => {
+			setIsDevToolsOpen(event.detail.isOpen);
+		};
+
+		window.addEventListener('devtoolschange', handleChange);
+
+		return () => {
+			window.removeEventListener('devtoolschange', handleChange);
+		};
+	}, []);
+
+	return isDevToolsOpen;
+}
+```
+
+```jsx
+import {useDevToolsStatus} from './useDevToolsStatus.js';
+
+export default function App() {
+	const isDevToolsOpen = useDevToolsStatus();
+	return isDevToolsOpen ? 'OPEN' : 'CLOSED';
+}
+```
+
 ## Support
 
 - Chrome DevTools
