argon-html
v0.0.15
Published
HTML template tag to convert template string to DOM nodes
Downloads
19
Maintainers
Readme
Argon HTML
HTML template tag to convert template string to DOM nodes
Install
npm i argon-html
Usage
Covert template string to compatible HTML string
Simple example:
import { htmlString } from "argon-html";
const text = "Hello World!";
const htmlStr = htmlString`
<div class="container">
<div class="text">${text}</div>
</div>
`;
console.log(htmlStr);
/**
* Output:
*
* <div class="container">
* <div class="text">Hello World</div>
* </div>
*/
Complex example:
import { htmlString } from "argon-html";
const text = [
'<div class="text">Hello</div>',
'<div class="text">World</div>',
{ key: "value" },
];
const htmlStr = htmlString`
<div class="container">
${text}
</div>
`;
console.log(htmlStr);
/**
* Output:
*
* <div class="container">
* <div class="text">Hello</div>
* <div class="text">World</div>
* {"key": "value"}
* </div>
*/
Convert template string to DocumentFragment
import { html } from "argon-html";
const text = [
'<div class="text">Hello</div>',
'<div class="text">World</div>',
{ key: "value" },
];
const fragment = html`
<div class="container">
${text}
</div>
`;
console.log(fragment);
document.body.appendChild(fragment);
/**
* Output:
*
* <DocumentFragment>
* <div class="container">
* <div class="text">Hello</div>
* <div class="text">World</div>
* {"key": "value"}
* </div>
* </DocumentFragment>
*/