Attributes
1linkconst x = <div title='Hellow World!'>Bring the mouse over this.</div>
👉 You can use JavaScript variables and expressions for JSX attributes:
1linkconst msg = 'Hellow World!';
2linkconst x = <div title={msg}>Bring the mouse over this.</div>
1linkconst name = 'World';
2linkconst x = <div title={'Hellow ' + name + '!'}>Bring the mouse over this.</div>
linkDynamic Attributes
If a given attribute is a callbag, the element's attribute will be updated when the callbag has new values.
1linkconst timer = interval(1000);
2linkconst placeholder = expr(
3link $ => `You have been here ${$(timer) + 1 || 0} seconds!`
4link);
5link
6linkrenderer.render(
7link <input placeholder={placeholder} type='text'/>
8link).on(document.body);
👉 Dynamic attributes are updated only while the element lives on the DOM.
linkData, Aria and Custom Attributes
callbag-jsx creates attributes regardless of their naming. However, if you are using TypeScript,
attributes are type-checked. The type-checking overlooks any attribute in the form of *-*. So you
can set data or aria attributes without any errors:
1link<div data-x="hellow" aria-label="Yo!"/>
If you want to have custom attributes, either use the same *-* convention, or add the attributes
using the spread operator and casting to any:
1linkconst props = { x : 2 };
2linkconst D = <div title='wassup' {...props as any}/>;
linkStyles and Classes
While class or style attributes are like other attributes, callbag-jsx
provides plugins that make managing element classes and styles much easier.
