React get Screen Size

Hey,

is it possible to get the Screen Size thorught a react component into dash?
Another thing, can i use a div created in the react script as an Input or State of my dash callbacks?

Thx

You could try this rough sketch, though there might be an easier way!

layout = [
     dcc.Div(id="size"), # Set style so that it is hidden!
     dcc.Location(id="url")

]
  1. CLIENTSIDE callback with Output(“size”,“value”) and Input(“url”, “href”)
    • This will get triggered on page load ONLY
    • Inside this callback get the current screen size using js
  2. Normal callback with Output(WHATEVER) and Input(“size”,“value”)
    • This will get triggered once the size has been set
1 Like

Thanks for the quick answer, how can i get the screensize in the callback tho?
I havent found a method to do that yet.

In JS you can do window.innerWidth and window.innerHeight.

Sorry i shouldve been more specific, are you referring to the html.Script component to use js? The question im having is how do i use window.innerWidth to get the width informatin into a variable inside of dash.

I hope this helps

No not html.Script. A client side callback, there are examples on this page https://dash.plot.ly/performance.

A client side callback is in javascript, which is where the window information is available. So create a client side (JS) callback to set a hidden div. Then have a Python callback that listens for changes to the hidden div and voila you have access to that information!

Ok i think i understood how this should work. Ill try it out and get back to you later.
Can any problems occur with multiple users using the app? Ive not heard of clientstide callbacks yet and how they work.

Thank you man appreacie it

Worked like a charm, thx m8.
Have a good one!

Hello!

I would like to share my solution, since I just used this client-side trick. Thanks to @sjtrny !

app.layout = html.Div([
    dcc.Location(id='url'),
    html.Div(id='viewport-container')
])

app.clientside_callback(
    """
    function(href) {
        var w = window.innerWidth;
        var h = window.innerHeight;
        return {'height': h, 'width': w};
    }
    """,
    Output('viewport-container', 'children'),
    Input('url', 'href')
)
2 Likes

Hello,

I tried to implement the marked solution however I recieve this error in return:

Cannot read property ‘children’ of undefined
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
TypeError: Cannot read property ‘children’ of undefined

at handleClientside (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:93282:54)

at http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:93526:21

at new Promise (<anonymous>)

at executeCallback (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:93513:21)

at http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:99173:100

at _map (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:75415:19)

at map (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:78219:78)

at http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:74584:15

at f2 (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:74400:14)

at _callee2$ (http://127.0.0.1:8080/_dash-component-suites/dash_renderer/dash_renderer.v1_9_1m1617900243.dev.js:99172:343)

Additionally, would I add additional children elements under html.Div(id=‘viewport-container’)?

Basically, the code originally returns a JS object, you can cover it to JSON via:

return JSON.stringify({'height': h, 'width': w});