React get Screen Size

Dash Python
1

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

2

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
3

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

4

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

5

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

6

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!

7

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

8

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

9

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
11

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’)?

12

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

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

13

Dear Paichui, I tried your script in my app and it works if I use it inside visual studio in debug mode but when I use it in production on the server it does not return anything in the viewport-container div. What should I do ?