Is it possible to access the data stored in dcc.Store from javascript

Dash Python
1

In my code, when i press certain key from keyboard it has to get value stored in dcc.Store and change it. Since dash does not support natively keyboard event that is why i have to use js event to capture the keyboard event. but there also i have to access the dcc.Store value. How can i access it from external javascript?

2

Did you try the keyboard component?

https://www.dash-extensions.com/components/keyboard

Regarding you actual question, you can access the store by using clientside callbacks.

1 Like
3

Here is an example for the clientside callbacks using a hidden button:

from dash import Dash, dcc, html, Input, Output, State

app = Dash(__name__)

app.layout = html.Div([
    dcc.Store(id='store', data=0),
    html.Button(id = 'hidden-button', style={'display':'none'}),
    dcc.Input(
        id='numeric-input',
        value=0,
        type = 'number'
    )
])

@app.callback(
    Output('store', 'data'),
    [Input('numeric-input', 'value')]
)
def update_store(value):
    return value


app.clientside_callback(
'''
function(n, data){
    if(n) alert(data);
    return "";
}
''',
    Output('hidden-button', 'title'), #output dummy
    Input('hidden-button', 'n_clicks'),
    State('store', 'data'),
    prevent_initial_call=True
)


if __name__ == '__main__':
    app.run_server(debug=True)

and in assets/script.js something like:


  document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
      button = document.getElementById('hidden-button')
      console.log("Clicked")
      button.click()
    }
});
4

This might be interesting for you.