redraw_dom - v19.0.1

redraw/dom/attribute

Implementation for HTML and SVG attributes usable in React and in browser. Contrarily to Lustre, every attributes can take arbitrary data, because they’re directly bind in the underlying component’s props.

All available attributes can be found in the React.dev documentation for detailed information, as well as on MDN.

Types

Attribute

opaque </>

Attribute linked on an HTML or SVG node. Think about like a prop in React.

pub opaque type Attribute

Dir

</>

Directionality of an element text.

pub type Dir {
  Ltr
  Rtl
}

Constructors 

  • Ltr
  • Rtl

InnerHTML

</>

Inner HTML data are HTML that will not be verified sanitized. Be careful when using it. You should almost always prefer to use redraw/element/html.

pub type InnerHTML

Translate

</>

Translate of a translatable element.

pub type Translate {
  Yes
  No
}

Constructors 

  • Yes
  • No

Values

accept

</> 
pub fn accept(types: List(String)) -> Attribute

Documentation

accept_charset

</> 
pub fn accept_charset(types: List(String)) -> Attribute

Documentation

access_key

</> 
pub fn access_key(value: String) -> Attribute

Documentation

action

</> 
pub fn action(url: String) -> Attribute

Documentation

action_

</> 
pub fn action_(
  handler: fn(form_data.FormData) -> Nil,
) -> Attribute

Documentation

alt

</> 
pub fn alt(value: String) -> Attribute

Documentation

aria

</> 
pub fn aria(key: String, value: String) -> Attribute

Set aria attribute on the node. Should be used like aria("valuenow", "75").

attribute

</> 
pub fn attribute(key: String, content: a) -> Attribute

Generic attribute. key will be the key in the HTML attributes as-is, while content can be anything. content will be converted by React to strings, so be careful to not send complicated data structure, but booleans, strings numbers, etc. are plainly supported.

Documentation

auto_capitalize

</> 
pub fn auto_capitalize(value: String) -> Attribute

Documentation

autocomplete

</> 
pub fn autocomplete(name: String) -> Attribute

Documentation

autofocus

</> 
pub fn autofocus(should_autofocus: Bool) -> Attribute

Documentation

autoplay

</> 
pub fn autoplay(should_autoplay: Bool) -> Attribute

Documentation

checked

</> 
pub fn checked(is_checked: Bool) -> Attribute

Documentation

class

</> 
pub fn class(value: String) -> Attribute

Documentation

class_name

</> 
pub fn class_name(value: String) -> Attribute

Alias of class.
Documentation

cols

</> 
pub fn cols(val: Int) -> Attribute

Documentation

content_editable

</> 
pub fn content_editable(value: Bool) -> Attribute

If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with content_editable(True) because React will not be able to update its content after user edits.
Documentation

controls

</> 
pub fn controls(visible: Bool) -> Attribute

Documentation

dangerously_set_inner_html

</> 
pub fn dangerously_set_inner_html(
  inner_html: InnerHTML,
) -> Attribute

Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability.
Documentation

data

</> 
pub fn data(key: String, value: String) -> Attribute

Data attributes let you attach some string data to the element, for example data("fruit", "banana"). In React, they are not commonly used because you would usually read data from props or state instead.
Documentation

dir

</> 
pub fn dir(value: Dir) -> Attribute

Specifies the text direction of the element.
Documentation

disabled

</> 
pub fn disabled(is_disabled: Bool) -> Attribute

Documentation

download

</> 
pub fn download(filename: String) -> Attribute

Documentation

draggable

</> 
pub fn draggable(value: Bool) -> Attribute

Specifies whether the element is draggable. Part of HTML Drag and Drop API.
Documentation

enctype

</> 
pub fn enctype(value: String) -> Attribute

Documentation

enter_key_hint

</> 
pub fn enter_key_hint(value: String) -> Attribute

Specifies which action to present for the enter key on virtual keyboards.
Documentation

for

</> 
pub fn for(value: String) -> Attribute

For

form_action

</> 
pub fn form_action(action: String) -> Attribute

Documentation

form_action_

</> 
pub fn form_action_(
  handler: fn(form_data.FormData) -> Nil,
) -> Attribute

[Documentation](/// Documentation

form_enctype

</> 
pub fn form_enctype(value: String) -> Attribute

Documentation

form_method

</> 
pub fn form_method(method: String) -> Attribute

Documentation

form_novalidate

</> 
pub fn form_novalidate(value: Bool) -> Attribute

Documentation

form_target

</> 
pub fn form_target(target: String) -> Attribute

Documentation

height

</> 
pub fn height(val: Int) -> Attribute

Documentation

hidden

</> 
pub fn hidden(value: Bool) -> Attribute

Specifies whether the element should be hidden.
Documentation

href

</> 
pub fn href(url: String) -> Attribute

Documentation

html_for

</> 
pub fn html_for(value: String) -> Attribute

Alias of for.
Documentation

id

</> 
pub fn id(value: String) -> Attribute

Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with useId to avoid clashes between multiple instances of the same component.
Documentation

inner_html

</> 
pub fn inner_html(html: String) -> InnerHTML

The inner_html data should be created as close to where the HTML is generated as possible. This ensures that all raw HTML being used in your code is explicitly marked as such, and that only variables that you expect to contain HTML are passed to dangerously_set_inner_html. It is not recommended to create the object inline like html.div([attribute.dangerously_set_inner_html(attribute.inner_html(markup))], [])
Documentation

input_mode

</> 
pub fn input_mode(value: String) -> Attribute

Specifies what kind of keyboard to display (for example, text, number or telephone).
Documentation

is

</> 
pub fn is(value: String) -> Attribute

If specified, the component will behave like a custom element.
Documentation

item_prop

</> 
pub fn item_prop(value: String) -> Attribute

Specifies which property the element represents for structured data crawlers.
Documentation

lang

</> 
pub fn lang(value: String) -> Attribute

Specifies the language of the element.
Documentation

loop

</> 
pub fn loop(should_loop: Bool) -> Attribute

Documentation

max

</> 
pub fn max(val: String) -> Attribute

Documentation

method

</> 
pub fn method(method: String) -> Attribute

Documentation

min

</> 
pub fn min(val: String) -> Attribute

Documentation

msg

</> 
pub fn msg(uri: String) -> Attribute

name

</> 
pub fn name(name: String) -> Attribute

Documentation

none

</> 
pub fn none() -> Attribute

none will not appear in HTML attributes. Use it for conditional rendering.

novalidate

</> 
pub fn novalidate(value: Bool) -> Attribute

Documentation

open

</> 
pub fn open(is_open: Bool) -> Attribute

Documentation

pattern

</> 
pub fn pattern(regex: String) -> Attribute

Documentation

placeholder

</> 
pub fn placeholder(text: String) -> Attribute

Documentation

readonly

</> 
pub fn readonly(is_readonly: Bool) -> Attribute

Documentation

ref

</> 
pub fn ref(ref: redraw.Ref(option.Option(a))) -> Attribute

A ref object from redraw.use_ref. Your ref will be filled with the DOM element for this node. Contrarily to JS React, when using a Ref, you’re forced to use an optional type here. Because when using this function, you want to get a reference from a real DOM node, meaning at the initialization of the reference, you won’t have any data. Use ref_ when you want full control over the ref you send to the Component.
Documentation

ref_

</> 
pub fn ref_(ref: fn(a) -> Nil) -> Attribute

A ref callback function. The callback will be provided with the DOM element for this node. Use this function to get control on the ref provided by the DOM node or the component.
Documentation

rel

</> 
pub fn rel(relationship: String) -> Attribute

Documentation

required

</> 
pub fn required(is_required: Bool) -> Attribute

Documentation

role

</> 
pub fn role(value: String) -> Attribute

Specifies the element role explicitly for assistive technologies.

rows

</> 
pub fn rows(val: Int) -> Attribute

Documentation

selected

</> 
pub fn selected(is_selected: Bool) -> Attribute

Documentation

slot

</> 
pub fn slot(value: String) -> Attribute

Specifies the slot name when using shadow DOM.
Documentation

spell_check

</> 
pub fn spell_check(value: Bool) -> Attribute

If explicitly set to true or false, enables or disables spellchecking.
Documentation

src

</> 
pub fn src(value: String) -> Attribute

Documentation

step

</> 
pub fn step(val: String) -> Attribute

Documentation

style

</> 
pub fn style(styles: List(#(String, String))) -> Attribute

Documentation

suppress_content_editable_warning

</> 
pub fn suppress_content_editable_warning(
  value: Bool,
) -> Attribute

If True, suppresses the warning that React shows for elements that both have children and content_editable(True) (which normally do not work together). Use this if you’re building a text input library that manages the contentEditable content manually.

suppress_hydration_warning

</> 
pub fn suppress_hydration_warning(value: Bool) -> Attribute

If you use server rendering, normally there is a warning when the server and the client render different content. In some rare cases (like timestamps), it is very hard or impossible to guarantee an exact match. If you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don’t overuse it. Read about suppressing hydration errors.

tab_index

</> 
pub fn tab_index(value: Int) -> Attribute

Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
Documentation

target

</> 
pub fn target(value: String) -> Attribute

Documentation

title

</> 
pub fn title(value: String) -> Attribute

Specifies the tooltip text for the element.
Documentation

translate

</> 
pub fn translate(value: Translate) -> Attribute

Passing No excludes the element content from being translated.
Documentation

type_

</> 
pub fn type_(name: String) -> Attribute

Type of an input. Value can be "button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", or "week".

value

</> 
pub fn value(val: String) -> Attribute

Input Documentation
Button Documentation

width

</> 
pub fn width(val: Int) -> Attribute

Documentation

wrap

</> 
pub fn wrap(mode: String) -> Attribute

Documentation

✨ Search Document