18 |
18 |
19 |
20 |
21 | Leptos-hotkeys creates and manages keyboard shortcuts. It provides macros and functions that simplify the definition of
22 | keybindings, since the management of event lifecycle associated with keyboard interactions has been done for you!
23 |
24 | ## Live example
25 |
26 | Curious to see how it works? [See the demo](https://leptos-hotkeys.vercel.app).
27 |
28 | To get started, follow the [Quick Start](#quick-start) section.
29 |
30 | ## Features
31 |
32 | > [!NOTE]
33 | > This crate has three types of hotkeys: global, scoped, and focus-trapped.
34 |
35 |
36 | ### The `use_hotkeys!` Macro
37 |
38 | Use this macro to declare global and scoped hotkeys. This macro has js idioms while preserving Leptos standards. [More about the macro.](](#macro-api).)
39 |
40 | ### Global Hotkeys
41 |
42 | This example creates two global hotkeys: `W` and `F`.
43 |
44 | ```rust
45 | use leptos_hotkeys::use_hotkeys;
46 |
47 | #[component]
48 | pub fn SomeComponent() -> impl IntoView {
49 | let (count, set_count) = create_signal(0);
50 |
51 | // creating a global scope for the W key
52 | use_hotkeys!(("keyw") => move |_| {
53 | logging::log!("w has been pressed");
54 | set_count.update(|c| *c += 1);
55 | });
56 |
57 | // this is also a global scope for the F key!
58 | use_hotkeys!(("keyf", "*") => move |_| {
59 | logging::log!("f has been pressed");
60 | set_count.update(|c| *c -= 1);
61 | });
62 |
63 | view! { Num Respects: {count}
} 64 | } 65 | ``` 66 | 67 | > [!TIP] 68 | > How do I write certain keys? See [Key Grammar](#keybinding-grammar). 69 | 70 | > [!NOTE] 71 | > The `*` symbol is reserved for the global scope_. 72 | > 73 | > The `W` hotkey omitted the scope parameter, implicitly making it global. 74 | 75 | ### Scoped Hotkeys 76 | Scopes provide context behind hotkeys. This context can be chained to a component, a state, or logic. 77 | 78 | This example shows an inner and outer scope and hotkeys that toggle scopes. 79 | 80 | ```rust 81 | use leptos_hotkeys::{use_hotkeys, use_hotkeys_context, HotkeysContext}; 82 | 83 | #[component] 84 | pub fn SomeComponent() -> impl IntoView { 85 | 86 | let HotkeysContext { enable_scope, disable_scope, .. } = use_hotkeys_context(); 87 | 88 | // switch into the inner scope 89 | use_hotkeys!(("keyi", "outer") => move |_| { 90 | disable_scope.call("outer".to_string()); 91 | enable_scope.call("inner".to_string()); 92 | }); 93 | 94 | // switch into the outer scope 95 | use_hotkeys!(("keyo", "inner") => move |_| { 96 | disable_scope.call("inner".to_string()); 97 | enable_scope.call("outer".to_string()); 98 | }); 99 | 100 | view! { 101 |` tag. This hotkey will fire iff the element is focused and the scope is correct. 117 | 118 | ```rust 119 | use leptos_hotkeys::use_hotkeys_ref; 120 | 121 | #[component] 122 | pub fn SomeComponent() -> impl IntoView { 123 | 124 | let p_ref = use_hotkeys_ref!(("keyk", "*") => move |_| { 125 | // some logic 126 | }); 127 | 128 | view! { 129 |
130 | p tag with node ref 131 |
132 | } 133 | } 134 | ``` 135 | 136 | ## Quick Start 137 | 138 | ### Installation 139 | 140 | ```shell 141 | cargo add leptos_hotkeys 142 | ``` 143 | 144 | We also offer other feature flags that enhance developer experience, see [features](#features). 145 | 146 | ### `provide_hotkeys_context()` 147 | 148 | Call `provide_hotkeys_context()` in the `App()` component. This will provide the `HotkeysContext` for the current reactive node and all of its descendents. This function takes three parameters, the `node_ref`, a flag to disable blur events and a list of `initially_active_scopes`. 149 | `provide_hotkeys_context()` returns a `HotkeyContext`. To manage hotkeys, you can pull necessary signals out of `HotkeysContext`. 150 | 151 | ```rust 152 | use leptos_hotkeys::{provide_hotkeys_context, HotkeysContext, scopes}; 153 | 154 | #[component] 155 | pub fn App() -> impl IntoView { 156 | provide_meta_context(); 157 | 158 | let main_ref = create_node_ref:: Álvaro Mondéjar 💻 |
234 |  Robert Junkins 💻 |
235 |  LeoniePhiline 📖 |
236 |  Gábor Szabó 📖 |
237 |  Phillip Baird 🐛 💻 |
238 |  zakstucke 🐛 💻 |
239 |  Ryangguk Kim 💻 |
240 |
 Max Bergmark 💻 |
243 |  Pavlo Myroniuk 💻 |
244 |
press ctrl+R to go to repository
113 |a library designed to declaratively pair your keybindings with callbacks.
115 |Press 's' to toggle between scopes a and b
121 |Current scope: {move || { current_scope.get() }}
122 |scope_a
132 |Current count: {count}
134 |"press 'Arrow Up' to increase the count"
136 |"press 'Arrow Down' to decrease the count"
137 |"press 'Escape' to reset the count"
138 |click on me and press 6
147 |scope_b
157 |press "Cmd/Super/Win"+ 'B'
159 |Unknown command: {unknown}
193 |"Error: " {error_string}
71 | } 72 | } 73 | /> 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /examples/ssr-demo/src/fileserv.rs: -------------------------------------------------------------------------------- 1 | use crate::app::App; 2 | use axum::response::Response as AxumResponse; 3 | use axum::{ 4 | body::Body, 5 | extract::State, 6 | http::{Request, Response, StatusCode}, 7 | response::IntoResponse, 8 | }; 9 | use leptos::*; 10 | use std::convert::Infallible; 11 | use tower::ServiceExt; 12 | use tower_http::services::{fs::ServeFileSystemResponseBody, ServeDir}; 13 | 14 | pub async fn file_and_error_handler( 15 | State(options): State