Function arrowTags

Format tagged templates for HTML tags

Example

Pass contents, attributes, then html element

import { html } from '@arrow-js/core';
import { arrowTags } from 'arrow-tags';
const greeting = 'Hello';
const style = 'color: red;';
// Render a span with red text to the DOM
const el = document.getElementById('root');
arrowTags(html).span`${greeting}`({ style })(el);
Copy

Example

Pass reactive contents that update interactively

import { reactive, html } from '@arrow-js/core';
import { arrowTags } from 'arrow-tags';
const data = reactive({ i: 0 });
const greetings = ['Hello', 'Goodbye'];
const toGreeting = ({ i }) => greetings[i % 2];
const props = { data, "@click": () => data.i += 1 };
// The button greeting reacts to user input
const el = document.getElementById('root');
arrowTags(html).button`${toGreeting}`(props)(el);
Copy

Example

Pass attributes that update interactively

import { reactive, html } from '@arrow-js/core';
import { arrowTags } from 'arrow-tags';
const data = reactive({ i: 0 });
const colors = ['red', 'pink'];
const toColors = ({ i }) => colors[i % 2];
const style = d => `color: ${toColors(d)};`;
// The button color reacts to user input
const el = document.getElementById('root');
arrowTags(html).button`Hello`({
   data, style, "@click": () => data.i += 1
})(el);
Copy