Append script when dash components are loaded

Dash Python
7

I have coded an elegant solution for this!! :tada: :tada:

Now, you can use a component called that is available in the grasia-dash-components library (pip install grasia-dash-components) and set the src attribute to the url of the external javascript code you want to append. Below I show you a small example where I import the jQuery library:

import dash
import dash_html_components as html 
import grasia-dash-components as gdc

app = dash.Dash()
app.layout  = html.P('Hello world!')
app.layout += gdc.Import(src="https://code.jquery.com/jquery-3.3.1.min.js")

The Import component will load only when all the dash app is loaded and it isn’t affected by the app.scripts.config.serve_locally setting.
Similarly, you can import local .js files as long as you are serving them from a local web server (You might use the Flask server that Dash uses behind the hoods. Ping me if you need more help on this.)

Technical explanation:
The solution consists in using a react component called that which belongs to an external dash library, and, therefore is loaded only when all the React components for the Dash app are loaded.
This component renders as a html tag with the defer attribute set to true.
The source code is available in Github.

Please, try it and let me know any issues you face.

4 Likes