rx.script("console.log('inline javascript')")
assets
directory and include it via the src
prop.rx.script(src="/my-custom.js")
custom_attrs
prop.rx.script(
src="//gc.zgo.at/count.js",
custom_attrs={
"data-goatcounter": "https://reflextoys.goatcounter.com/count"
},
),
<script src="//gc.zgo.at/count.js" data-goatcounter="https://reflextoys.goatcounter.com/count" data-nscript="afterInteractive"></script>
rx.client_side
event handler can be used to execute arbitrary javascript code in response to UI events. The handler may call functions defined in previous rx.script
components.rx.vstack(
rx.script(
"""const handle_press = (arg) => {
window.alert("You clicked at " + arg.clientX + ", " + arg.clientY);
}"""
),
rx.button(
"Where Did I Click?",
on_click=rx.client_side("handle_press(args)"),
),
)
window.alert
directly as an example. Users should generally avoid inline javascript where Reflex provides an alternative, like rx.window_alert
Next.js script component.
Note that this component differs from reflex.components.base.document.NextScript in that it is intended for use with custom and user-defined scripts. It also differs from reflex.components.base.link.ScriptTag, which is the plain HTML <script> tag which does not work when rendering a component.