✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨
[ Learn ]
[ Concepts ]
[ Reference ]
Script
The Script component can be used to include inline javascript or javascript files by URL. It uses the next/script component to inject the script and can be safely used with conditional rendering to allow script side effects to be controlled by the state.
rx.script("console.log('inline javascript')")Complex inline scripting should be avoided. If the code to be included is more than a couple lines, it is more maintainable to implement it in a separate javascript file in the
assets directory and include it via the src prop.rx.script(src="/my-custom.js")This component is particularly helpful for including tracking and social scripts. Any additional attrs needed for the script tag can be supplied via
custom_attrs prop.rx.script(
src="//gc.zgo.at/count.js",
custom_attrs={
"data-goatcounter": "https://reflextoys.goatcounter.com/count"
},
),This code renders to something like the following to enable stat counting with a third party service.
<script src="//gc.zgo.at/count.js" data-goatcounter="https://reflextoys.goatcounter.com/count" data-nscript="afterInteractive"></script>Client Side Events
The provided
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)"),
),
)Avoid Recreating the Wheel
This snippet uses
window.alert directly as an example. Users should generally avoid inline javascript where Reflex provides an alternative, like rx.window_alertScript
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.
Copyright © 2023 Pynecone, Inc.