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>

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.