Document React usage (#70)

Co-authored-by: Sindre Sorhus <[email protected]>

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