How do i get Typed.js to work in a python Dash application?
Question:
I’m trying to have the Typed.js packages to work in a Dash application. With Typed.js the text and a page gets written dynamically using a certain list of words. Minimal code example:
import dash
from dash import html
# import grasia_dash_components as gdc
# import dash_defer_js_import as dji
external_scripts = [
'https://unpkg.com/[email protected]/dist/typed.umd.js',
]
app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
[
html.H1(["Hello, ",html.Span("Dash", className="mov", id="mov"),"!"]),
]
)
# app.layout.children.append(gdc.Import(src="./20_typed.js"))
app.layout.children.append(dash.html.Script("""
var typed = new Typed("#mov", {
strings: ["for one", "for two", "for three"],
typeSpeed: 150,
backSpeed: 150,
loop: true
});
"""))
if __name__ == "__main__":
app.run_server(debug=True)
I tried several options but to not success:
- Via dash.html.Script
- Via a js file in the assets folder (same javascript as in the code in the assets folder)
- Via grasia packages (20_typed.js in root folder and same javascript as in the code code)
In the code example option 3 is commented out to show you what i did (also with dji didn’t get it to work).
Answers:
You could use a client side callback
from dash import Dash, html
from dash.dependencies import Output, Input
app = Dash(__name__, external_scripts=["https://unpkg.com/[email protected]/dist/typed.umd.js"])
app.layout = html.Span(id="element")
app.clientside_callback(
"""
function(input) {
var typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
return window.dash_clientside.no_update
}
""",
Output('element', 'children'),
Input('element', 'children')
)
if __name__ == '__main__':
app.run_server(debug=True)
I’m trying to have the Typed.js packages to work in a Dash application. With Typed.js the text and a page gets written dynamically using a certain list of words. Minimal code example:
import dash
from dash import html
# import grasia_dash_components as gdc
# import dash_defer_js_import as dji
external_scripts = [
'https://unpkg.com/[email protected]/dist/typed.umd.js',
]
app = dash.Dash(__name__, external_scripts=external_scripts)
app.layout = html.Div(
[
html.H1(["Hello, ",html.Span("Dash", className="mov", id="mov"),"!"]),
]
)
# app.layout.children.append(gdc.Import(src="./20_typed.js"))
app.layout.children.append(dash.html.Script("""
var typed = new Typed("#mov", {
strings: ["for one", "for two", "for three"],
typeSpeed: 150,
backSpeed: 150,
loop: true
});
"""))
if __name__ == "__main__":
app.run_server(debug=True)
I tried several options but to not success:
- Via dash.html.Script
- Via a js file in the assets folder (same javascript as in the code in the assets folder)
- Via grasia packages (20_typed.js in root folder and same javascript as in the code code)
In the code example option 3 is commented out to show you what i did (also with dji didn’t get it to work).
You could use a client side callback
from dash import Dash, html
from dash.dependencies import Output, Input
app = Dash(__name__, external_scripts=["https://unpkg.com/[email protected]/dist/typed.umd.js"])
app.layout = html.Span(id="element")
app.clientside_callback(
"""
function(input) {
var typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
return window.dash_clientside.no_update
}
""",
Output('element', 'children'),
Input('element', 'children')
)
if __name__ == '__main__':
app.run_server(debug=True)