Update docs to reflect the changes of .code usage (#102)

CHANGELOG.md

@@ -1,23 +1,23 @@
 # Changelog
 
-## _April 18th, 2024_ - 0.2.0
+## _April 18th, 2024_ - [0.2.0]
 
 ### Breaking changes
 
 - Internal modules are no longer public.
 - Remove `prelude` module.
 - Make ref nodes listen to `keydown` Keyboard events.
 - Remove uneeded features `csr` and `hydrate`.
+- Use `code` instead of `key` property for `KeyboardEvent`.
 
 ### Enhancements
 
 - Allow to import from root package instead of forcing the usage of `prelude` module.
 - Do not depend on `log` if `debug` feature is not enabled.
 - Relax dependency versions.
 - Add compatibility with Leptos stable.
-- Use `code` instead of `key` property for `KeyboardEvent`.
 
-## _February 27th, 2024_- 0.1.5
+## _February 27th, 2024_ - 0.1.5
 
 - Clean up macros
 
@@ -35,3 +35,5 @@
 
 - Elevate `leptos` to v0.6.5
 - Added `event.preventDefault()`.
+
+[0.2.0]: https://github.com/gaucho-labs/leptos-hotkeys/compare/b83afc96...v0.2.0

CONTRIBUTING.md

@@ -24,7 +24,8 @@ cargo make format
 
 ```sh
 git tag v0.1.0
-git push origin v0.1.0
+git push upstream v0.1.0
 ```
 
-> [!NOTE] Change `v0.1.0` to the new version number.
+> [!NOTE]
+> Change `v0.1.0` to the new version number.

README.md

@@ -53,13 +53,13 @@ pub fn SomeComponent() -> impl IntoView {
     let (count, set_count) = create_signal(0);
 
     // creating a global scope for the W key
-    use_hotkeys!(("w") => move |_| {
+    use_hotkeys!(("keyw") => move |_| {
         logging::log!("w has been pressed");
         set_count.update(|c| *c += 1);
     });
 
     // this is also a global scope for the S key!
-    use_hotkeys!(("s", "*") => move |_| {
+    use_hotkeys!(("keys", "*") => move |_| {
         logging::log!("s has been pressed");
         set_count.update(|c| *c -= 1);
     });
@@ -89,13 +89,13 @@ pub fn SomeComponent() -> impl IntoView {
     let HotkeysContext { enable_scope, disable_scope, .. } = use_hotkeys_context();
 
     // switch into the inner scope
-    use_hotkeys!(("i", "outer") => move |_| {
+    use_hotkeys!(("keyi", "outer") => move |_| {
         disable_scope("outer");
         enable_scope("inner");
     });
 
     // switch into the outer scope
-    use_hotkeys!(("o", "inner") => move |_| {
+    use_hotkeys!(("keyo", "inner") => move |_| {
         disable_scope("inner");
         enable_scope("outer");
     });
@@ -123,7 +123,7 @@ use leptos_hotkeys::use_hotkeys_ref;
 #[component]
 pub fn SomeComponent() -> impl IntoView {
 
-    let p_ref = use_hotkeys_ref!(("K", "*") => move |_| {
+    let p_ref = use_hotkeys_ref!(("keyk", "*") => move |_| {
         // some logic
     });
 
@@ -260,7 +260,7 @@ use_hotkeys!(("keys", "scope") => move |_| {
 For global hotkeys, you can omit the second parameter as it will implicitly add the global scope.
 
 ```rust
-use_hotkeys!(("key") => move |_| {
+use_hotkeys!(("keys") => move |_| {
     // callback logic here
 });
 ```
@@ -274,7 +274,7 @@ use leptos_hotkeys::use_hotkeys_ref;
 
 #[component]
 pub fn SomeComponent() -> impl IntoView {
-    let some_ref = use_hotkeys_ref!(("key", "scope") => move |_| {
+    let some_ref = use_hotkeys_ref!(("keys", "scope") => move |_| {
         // callback logic here
     });
 
@@ -369,7 +369,7 @@ fn Component() -> impl IntoView {
     let (count, set_count) = create_signal(0);
 
     use_hotkeys_scoped(
-        "F", // the F key
+        "keyf", // the F key
         Callback::new(move |_| {
             set_count.update(|count| { *count += 1 })
         }),
@@ -449,7 +449,7 @@ use leptos_hotkeys::use_hotkeys_ref;
 
 #[component]
 fn Component() -> impl IntoView {
-    let node_ref = use_hotkeys_ref("l", Callback::new(move |_| {
+    let node_ref = use_hotkeys_ref("keyl", Callback::new(move |_| {
         // some logic here
     }));
 

examples/demo/src/app.rs

@@ -69,7 +69,7 @@ fn HomePage() -> impl IntoView {
     });
 
     go_to_link(
-        "control+R",
+        "controlleft+keyR,controlright+keyR",
         "https://github.com/gaucho-labs/leptos_hotkeys".to_string(),
         "*",
     );
@@ -118,7 +118,7 @@ fn HomePage() -> impl IntoView {
 
             <div class="w-10/12 h-full flex flex-col space-y-20">
                 <div class="space-y-2 text-lg">
-                    <div class="flex space-x-8 flex items-end">
+                    <div class="flex space-x-8 items-end">
                         <Button href="https://github.com/gaucho-labs/leptos-hotkeys">
                             <p class="text-2xl">leptos_hotkeys</p>
                         </Button>
@@ -201,7 +201,8 @@ fn ErrorPage() -> impl IntoView {
     let unknown = p_unknown();
 
     view! {
-        <div class="h-screen w-full flex flex-col items-center justify-center font-robotomono".to_string()>
+        <div class="h-screen w-full flex flex-col items-center justify-center font-robotomono"
+            .to_string()>
             <p class="">Unknown command: {unknown}</p>
         </div>
     }

examples/ssr-demo/src/app.rs

@@ -42,10 +42,6 @@ fn HomePage() -> impl IntoView {
     // Creates a reactive value to update the button
     let (count, set_count) = create_signal(0);
 
-    use_hotkeys!(("meta+alt+t") => move |_| {
-        set_count.update(|c| *c += 1);
-    });
-
     use_hotkeys!(("arrowup") => move |_| {
         set_count.update(|c| *c += 1);
     });
@@ -55,7 +51,7 @@ fn HomePage() -> impl IntoView {
     });
 
     use_hotkeys!(("space") => move |_| {
-            logging::log!("hola")
+        logging::log!("hola")
     });
 
     let div_ref = create_node_ref::<html::Div>();
@@ -67,6 +63,8 @@ fn HomePage() -> impl IntoView {
     view! {
         <h1>"Welcome to Leptos!"</h1>
         <div>"Press arrow up and arrow down: " {count}</div>
-        <div tabIndex=-1 _ref=div_ref>howdy</div>
+        <div tabIndex=-1 _ref=div_ref>
+            howdy
+        </div>
     }
 }