✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog
DocsBlogChangelog

Search documentation...

/

Star

12k+

[ 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)"),
    ),
)

Script


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.

← HtmlCLI →

Copyright © 2023 Pynecone, Inc.