From 0470b744afb309f4fba69c031b5967aaad8b7cd0 Mon Sep 17 00:00:00 2001
From: y1j2x34 <y1j2x34@qq.com>
Date: Tue, 9 Apr 2024 14:38:25 +0800
Subject: [PATCH] docs: add README

---
 packages/react/README.md                      | 102 ++++++++++++++++++
 packages/react/src/context/KeyboardContext.ts |   8 +-
 2 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/README.md

diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 0000000..bbbad2f
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,102 @@
+# @vgerbot/shortcuts-react
+
+`@vgerbot/shortcuts-react` is a React library that provides a set of hooks and components for easily integrating keyboard shortcuts into your React applications. It is built on top of the `@vgerbot/shortcuts` library, which handles the underlying keyboard event management.
+
+## Installation
+
+```bash
+npm install @vgerbot/shortcuts-react
+```
+
+## Usage
+
+### `KeyboardProvider`
+
+The `KeyboardProvider` component is a React context provider that manages the keyboard instance and its options. It should be wrapped around the parts of your application where you want to use keyboard shortcuts.
+
+```jsx
+import { KeyboardProvider } from '@vgerbot/shortcuts-react';
+
+const App = () => (
+  <KeyboardProvider>
+    {/* Your app components */}
+  </KeyboardProvider>
+);
+```
+
+You can pass options to the `KeyboardProvider` to configure the keyboard instance:
+
+```jsx
+<KeyboardProvider anchor={document.body}>
+  {/* Your app components */}
+</KeyboardProvider>
+```
+
+### `useKeyboard`
+
+The `useKeyboard` hook returns the `Keyboard` instance, which provides access to various methods for advanced keyboard management. With the keyboard instance, you can register or unregister shortcut commands, add event interceptors, switch keyboard contexts, and more.
+
+```jsx
+import { useKeyboard } from '@vgerbot/shortcuts-react';
+
+const MyComponent = () => {
+    const keyboard = useKeyboard();
+
+    useEffect(() => {
+        // Register a shortcut
+        const unregister = keyboard.on('save', () => {
+          console.log('Shortcut command triggered!');
+        });
+      
+        // Add an event interceptor
+        keyboard.addInterceptor((event, next) => {
+          // Intercept and handle keyboard events
+          // ...
+          return next(event);
+        });
+    
+        // Switch keyboard context
+        keyboard.switchContext('editor');
+    
+        // Unregister the shortcut
+        return () => unregister();
+    }, [keyboard]);
+
+};
+```
+
+### `useCommand`
+
+The `useCommand` hook registers a keyboard shortcut with a provided command string and callback function.
+
+```jsx
+import { useCommand } from '@vgerbot/shortcuts-react';
+
+const MyComponent = () => {
+  useCommand('save', () => {
+    console.log('Shortcut triggered!');
+  });
+
+  // ...
+};
+```
+
+### `useShortcutKeyMatch`
+
+The `useShortcutKeyMatch` hook registers a keyboard shortcut with a provided shortcut object or string and callback function.
+
+```jsx
+import { useShortcutKeyMatch } from '@vgerbot/shortcuts-react';
+
+const MyComponent = () => {
+  useShortcutKeyMatch('Ctrl+S', () => {
+    console.log('Shortcut triggered!');
+  });
+
+  // ...
+};
+```
+
+## Contributing
+
+Contributions are welcome! Please read the [contributing guide](https://github.com/vgerbot-libraries/shortcuts/contributing.md) for more information.
diff --git a/packages/react/src/context/KeyboardContext.ts b/packages/react/src/context/KeyboardContext.ts
index c11d44d..764d5be 100644
--- a/packages/react/src/context/KeyboardContext.ts
+++ b/packages/react/src/context/KeyboardContext.ts
@@ -1,6 +1,6 @@
 import { Keyboard } from '@vgerbot/shortcuts';
-import React from 'react';
+import React, { Context } from 'react';
 
-export const KeyboardContext = React.createContext<Keyboard>(
-    null as unknown as Keyboard
-);
+export const KeyboardContext = React.createContext<Keyboard | null>(
+    null
+) as Context<Keyboard>;