wasm_react/props/
h_attrs.rs

1use super::{HtmlTag, H};
2use super::{Props, Style};
3use std::borrow::Cow;
4use wasm_bindgen::{intern, JsValue};
5
6/// To be used with [`H::dangerously_set_inner_html()`].
7#[derive(Debug, Default, PartialEq, Eq, Clone)]
8pub struct DangerousHtml<'a> {
9  /// The HTML content to be rendered.
10  pub __html: Cow<'a, str>,
11}
12
13macro_rules! impl_attr {
14  { $( $attr:ident, $attr_str:literal => $T:ty; )* } => {
15    $(
16      #[allow(missing_docs)]
17      pub fn $attr(self, value: $T) -> Self {
18        self.attr(intern($attr_str), &Into::into(value))
19      }
20    )*
21  };
22}
23
24/// Provides auto-completion for DOM attributes on [`H`].
25impl H<HtmlTag<'_>> {
26  /// Equivalent to `props.dangerouslySetInnerHTML = { __html: value.__html };`.
27  ///
28  /// See also [React documentation](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html).
29  ///
30  /// # Example
31  ///
32  /// ```
33  /// # use wasm_react::{*, props::*};
34  /// fn create_markup() -> DangerousHtml<'static> {
35  ///   DangerousHtml {
36  ///     __html: "First &middot; Second".into()
37  ///   }
38  /// }
39  ///
40  /// # fn f() -> VNode {
41  /// h!(div)
42  ///   .dangerously_set_inner_html(&create_markup())
43  ///   .build(())
44  /// # }
45  /// ```
46  pub fn dangerously_set_inner_html(self, value: &DangerousHtml) -> Self {
47    self.attr(
48      intern("dangerouslySetInnerHTML"),
49      Props::new()
50        .insert(intern("__html"), &value.__html[..].into())
51        .as_ref(),
52    )
53  }
54
55  /// Overwrites the class name attribute. Use [`h!`](crate::h) for easier way
56  /// to set the class names.
57  pub fn class_name(self, value: &str) -> Self {
58    self.attr(intern("className"), &value.into())
59  }
60
61  /// Sets the style attribute.
62  pub fn style(self, style: &Style) -> Self {
63    self.attr(intern("style"), style.as_ref())
64  }
65
66  impl_attr! {
67    // Standard HTML Attributes
68    accesskey, "accessKey" => &str;
69    contenteditable, "contentEditable" => bool;
70    contextmenu, "contextMenu" => &str;
71    dir, "dir" => &str;
72    draggable, "draggable" => bool;
73    hidden, "hidden" => bool;
74    id, "id" => &str;
75    lang, "lang" => &str;
76    placeholder, "placeholder" => &str;
77    slot, "slot" => &str;
78    spellcheck, "spellCheck" => bool;
79    tabindex, "tabIndex" => i32;
80    title, "title" => &str;
81    translate, "translate" => &str;
82    radiogroup, "radioGroup" => &str;
83
84    // WAI-ARIA
85    role, "role" => &str;
86
87    // RDFa Attributes
88    about, "about" => &str;
89    datatype, "datatype" => &str;
90    inlist, "inlist" => impl Into<JsValue>;
91    prefix, "prefix" => &str;
92    property, "property" => &str;
93    resource, "resource" => &str;
94    vocab, "vocab" => &str;
95
96    // Living Standard
97    inputmode, "inputMode" => &str;
98    is, "is" => &str;
99
100    // Standard HTML Attributes
101    accept, "accept" => &str;
102    acceptcharset, "acceptCharset" => &str;
103    action, "action" => &str;
104    allowfullscreen, "allowFullScreen" => bool;
105    allowtransparency, "allowTransparency" => bool;
106    alt, "alt" => &str;
107    autocomplete, "autoComplete" => &str;
108    autofocus, "autoFocus" => bool;
109    autoplay, "autoPlay" => bool;
110    capture, "capture" => impl Into<JsValue>;
111    cellpadding, "cellPadding" => impl Into<JsValue>;
112    cellspacing, "cellSpacing" => impl Into<JsValue>;
113    challenge, "challenge" => &str;
114    charset, "charSet" => &str;
115    checked, "checked" => bool;
116    cite, "cite" => &str;
117    classid, "classID" => &str;
118    cols, "cols" => u32;
119    colspan, "colSpan" => u32;
120    content, "content" => &str;
121    controls, "controls" => bool;
122    coords, "coords" => &str;
123    crossorigin, "crossOrigin" => &str;
124    data, "data" => &str;
125    datetime, "dateTime" => &str;
126    default, "default" => bool;
127    defer, "defer" => bool;
128    disabled, "disabled" => bool;
129    download, "download" => impl Into<JsValue>;
130    enctype, "encType" => &str;
131    form, "form" => &str;
132    formaction, "formAction" => &str;
133    formenctype, "formEncType" => &str;
134    formmethod, "formMethod" => &str;
135    formnovalidate, "formNoValidate" => bool;
136    formtarget, "formTarget" => &str;
137    frameborder, "frameBorder" => impl Into<JsValue>;
138    headers, "headers" => &str;
139    height, "height" => impl Into<JsValue>;
140    high, "high" => f64;
141    href, "href" => &str;
142    hreflang, "hrefLang" => &str;
143    html_for, "htmlFor" => &str;
144    html_type, "type" => &str;
145    httpequiv, "httpEquiv" => &str;
146    integrity, "integrity" => &str;
147    keyparams, "keyParams" => &str;
148    keytype, "keyType" => &str;
149    kind, "kind" => &str;
150    label, "label" => &str;
151    list, "list" => &str;
152    low, "low" => f64;
153    manifest, "manifest" => &str;
154    marginheight, "marginHeight" => f64;
155    marginwidth, "marginWidth" => f64;
156    max, "max" => f64;
157    maxlength, "maxLength" => f64;
158    media, "media" => &str;
159    mediagroup, "mediaGroup" => &str;
160    method, "method" => &str;
161    min, "min" => impl Into<JsValue>;
162    minlength, "minLength" => f64;
163    multiple, "multiple" => bool;
164    muted, "muted" => bool;
165    name, "name" => &str;
166    nonce, "nonce" => &str;
167    novalidate, "noValidate" => bool;
168    open, "open" => bool;
169    optimum, "optimum" => f64;
170    pattern, "pattern" => &str;
171    playsinline, "playsInline" => bool;
172    poster, "poster" => &str;
173    preload, "preload" => &str;
174    readonly, "readOnly" => bool;
175    rel, "rel" => &str;
176    required, "required" => bool;
177    reversed, "reversed" => bool;
178    rows, "rows" => u32;
179    rowspan, "rowSpan" => u32;
180    sandbox, "sandbox" => &str;
181    scope, "scope" => &str;
182    scoped, "scoped" => bool;
183    scrolling, "scrolling" => &str;
184    seamless, "seamless" => bool;
185    selected, "selected" => bool;
186    shape, "shape" => &str;
187    size, "size" => f64;
188    sizes, "sizes" => &str;
189    span, "span" => u32;
190    src, "src" => &str;
191    srcdoc, "srcDoc" => &str;
192    srclang, "srcLang" => &str;
193    srcset, "srcSet" => &str;
194    start, "start" => f64;
195    step, "step" => impl Into<JsValue>;
196    summary, "summary" => &str;
197    target, "target" => &str;
198    usemap, "useMap" => &str;
199    value, "value" => impl Into<JsValue>;
200    width, "width" => impl Into<JsValue>;
201    wmode, "wmode" => &str;
202    wrap, "wrap" => &str;
203  }
204}
wasm_react/props/h_attrs.rs

wasm_react/props/
h_attrs.rs
