escape-html-template-tag
Construct string literals that have their substitutions escaped automatically.
Usage
Basic example
import html from 'escape-html-template-tag'
const title = 'All about < & >'
const h1 = html`
<h1>${title}</h1>
`
// <h1>All about < & ></h1>Nesting templates
Escaped template literals can be nested and won't be interpollated again.
import html from 'escape-html-template-tag'
const h1 = html`<h1>Hello World</h1>`
const article = html`
${h1}
I'ts me!
`
// <h1>Hello World</h1>
// I'ts me!Automatically flatten arrays
In case a value is an Array, the items will be individually escaped and concatenated.
import html from 'escape-html-template-tag'
const listOfSymbols = html`
<ul>
${['<', '&', '>'].map(item => html`<li>symbol: ${item}</li>`)}
</ul>
`
// <ul>
// <li>symbol: <</li>
// <li>symbol: &</li>
// <li>symbol: ></li>
// </ul>Don't interpollate html from trusted sources with safe()
If you have html strings that already contain markup you can prevent it from being escaped with safe().
import html, { safe } from 'escape-html-template-tag'
const trustedString = '<a href="https://www.google.com">Google</a>'
const navigation = html`
<div>
${safe(trustedString)}
</div>
`
// <div>
// <a href="https://www.google.com">Google</a>
// </div>Join fragments together with join
import html, { join } from 'escape-html-template-tag'
const navigation = html`
<div>
${join(
['home', 'about', 'blog'].map(page => html`<a href="/${page}">${page}</a>`),
' | '
)}
</div>
`
// <div>
// <a href="/home">home</a> | <a href="/about">about</a> | <a href="/blog">blog</a>
// </div>Compose templates easily with functions
import html from 'escape-html-template-tag'
const anchor = (text, href) => html`<a href="${href}">${text}</a>`
const list = items => html`
<ul>
${items.map(item => html`<li>${item}</li>`)}
</ul>
`
const navigation = list(
anchor('Home', '/home'),
anchor('About', '/about'),
anchor('Blog', '/blog')
)
// <ul>
// <li><a href="/home">Home</a></li>
// <li><a href="/about">About</a></li>
// <li><a href="/blog">Blog</a></li>
// </ul>