Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Other

/

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>

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.
PropTypeDescriptionValues
srcstr

Required unless inline script is used

strategystr

When the script will execute: afterInteractive | beforeInteractive | lazyOnload

Event Triggers

TriggerDescription
on_load

The on_load event handler is called when the user loads a form. For example, it is called when the user clicks on a load button.

on_ready

The on_ready event handler is called when the script is ready to be executed.

on_error

The on_error event handler is called when the user encounters an error in a form. For example, it’s called when the user clicks on a error button.

← HtmlAlertdialog →

Did you find this useful?