Skip to content

🎯  Keyboard to URL

Submitted by Arnaud Miribel

Summary

Create bindings so that hitting a key on your keyboard opens an URL in a new tab!

Functions

keyboard_to_url

Map a keyboard key to open a new tab with a given URL.

Parameters:

Name Type Description Default
key str

Key to trigger (example 'k'). Defaults to None.

 None
key_code int

If key doesn't work, try hard-coding the key_code instead. Defaults to None.

 None
url str

Opens the input URL in new tab. Defaults to None.

 None
Source code in src/streamlit_extras/keyboard_url/__init__.py 
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@extra
def keyboard_to_url(
    key: str | None = None,
    key_code: int | None = None,
    url: str | None = None,
):
    """

    Map a keyboard key to open a new tab with a given URL.

    Args:
        key (str, optional): Key to trigger (example 'k'). Defaults to None.
        key_code (int, optional): If key doesn't work, try hard-coding the key_code instead. Defaults to None.
        url (str, optional): Opens the input URL in new tab. Defaults to None.
    """

    assert not (
        key and key_code
    ), """You can not provide key and key_code.
    Either give key and we'll try to find its associated key_code. Or directly
    provide the key_code."""

    assert (key or key_code) and url, """You must provide key or key_code, and a URL"""

    if key:
        key_code_js_row = f"const keyCode = '{key}'.toUpperCase().charCodeAt(0);"
    elif key_code:
        key_code_js_row = f"const keyCode = {key_code};"
    else:
        raise ValueError("You must provide key or key_code")

    components.html(
        f"""
<script>
const doc = window.parent.document;
buttons = Array.from(doc.querySelectorAll('button[kind=primary]'));
{key_code_js_row}
doc.addEventListener('keydown', function(e) {{
    e = e || window.event;
    var target = e.target || e.srcElement;
    // Only trigger the events if they're not happening in an input/textarea/select/button field
    if ( !/INPUT|TEXTAREA|SELECT|BUTTON/.test(target.nodeName) ) {{
        switch (e.keyCode) {{
            case keyCode:
                window.open('{url}', '_blank').focus();
                break;
        }}
    }}
}});
</script>
""",
        height=0,
        width=0,
    )

Import:

from streamlit_extras.keyboard_url import keyboard_to_url # (1)!
  1. You should add this to the top of your .py file 🛠

Examples

example

def example():
    # Main function
    keyboard_to_url(key="S", url="https://www.github.com/streamlit/streamlit")

    load_key_css()
    st.write(
        f"""Now hit {key("S", False)} on your keyboard...!""",
        unsafe_allow_html=True,
    )
Output (beta)