element-wrapper

A simple and safe way to set innerHTML for yo-yo or bel component.

Intall

$ npm i element-wrapper

Code

var yo = require('yo-yo')
var sanitizeHtml = require('sanitize-html')
 
module.exports = function elementWrapper (source, opts) {
  opts = opts || {}
 
  // create an empty container
  var container = document.createElement('span')
  // use innerHTML to set the content
  container.innerHTML = sanitizeHtml(source, opts)
 
  return yo`${container}`
}
 

API

var element = elementWrapper(htmlString, opts)

Please check sanitize-html for available options.

Usage

var yo = require('yo-yo')
var elementWrapper = require('../index.js')
 
var htmlString = '<div class="danger">xx dangerously set html</div>'
var app = yo`${elementWrapper(htmlString, {
  allowedAttributes: {
    '*': ['class']
  }
})}`
 
document.body.appendChild(app)

License

MIT