eht

escape-html-template-tag

Tag literal strings with this function to html escape interpolated values

Showing:

Popularity

Downloads/wk

111

GitHub Stars

19

Maintenance

Last Commit

5mos ago

Contributors

4

Package

Dependencies

0

Size (min+gzip)

0.6KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

escape-html-template-tag

Construct string literals that have their substitutions escaped automatically.

Standard - JavaScript Style Guide

Usage

Basic example

import html from 'escape-html-template-tag'
const title = 'All about < & >'
const h1 = html`
  <h1>${title}</h1>
`
// <h1>All about &lt; &amp; &gt;</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: &lt;</li>
//   <li>symbol: &amp;</li>
//   <li>symbol: &gt;</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="&#x2F;home">Home</a></li>
//   <li><a href="&#x2F;about">About</a></li>
//   <li><a href="&#x2F;blog">Blog</a></li>
// </ul>

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial