From 38ab02f8c8ae68686ddf286ea6a2a240f6d2a651 Mon Sep 17 00:00:00 2001
From: MohammadAli Karimi <65307721+devbymak@users.noreply.github.com>
Date: Tue, 23 Apr 2024 17:13:10 +0400
Subject: [PATCH] Document React usage (#70)

Co-authored-by: Sindre Sorhus <sindresorhus@gmail.com>
---
 readme.md | 54 ++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 10 deletions(-)

diff --git a/readme.md b/readme.md
index 858cfd8..88c9be5 100644
--- 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