Script
The Script component can be used to include inline javascript or javascript files by URL.
It uses the component to inject the script and can be safely used with conditional rendering to allow script side effects to be controlled by the state.
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.
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.
This code renders to something like the following to enable stat counting with a third party service.
API Reference
rx.script
Wrapper for the script element.
Props
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
async_ | bool | Indicates that the script should be executed asynchronously. |
char_set | str | Character encoding of the external script. |
cross_origin | "anonymous""use-credentials""" | Configures the CORS requests for the script. |
defer | bool | Indicates that the script should be executed after the page has finished parsing. |
integrity | str | Security feature allowing browsers to verify what they fetch. |
referrer_policy | """no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url" | Specifies which referrer information to send when fetching the script. |
src | str | URL of an external script. |
type | str | Specifies the MIME type of the script. |