Create HTML strings using JSX (or functions).
string-dom is a function that creates an HTML string.
- It is made to work with JSX, but renders it to a string, instead of to DOM.
- With
string-dom, JSX becomes an HTML templating language that can be used separately of React.
$ npm i string-dom --saveimport sd from 'string-dom'
/** @jsx sd */
// with JSX
// note the comment above, and see the link below
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#custom
document.body.innerHTML += (
<div class="wrapper">
<h1 class="heading" data-heading="data-heading">Heading Text</h1>
<p class="heading-sub" data-subheading="data-subheading">Subheading Text</p>
<p>An element without attributes.</p>
</div>
)
// without JSX
document.body.innerHTML += (
sd('div', { class: 'wrapper' },
sd('h1', { class: 'heading', 'data-heading': 'data-heading' }, 'Heading Text'),
sd('p', { class: 'heading-sub', 'data-subheading': 'data-subheading' }, 'Subheading Text'),
sd('p', 'An element without attributes.')
)
)Both the above generate the following HTML (as a string), then add it to the body:
<div class="wrapper">
<h1 class="heading" data-heading="data-heading">Heading Text</h1>
<p class="heading-sub" data-subheading="data-subheading">Subheading Text</p>
<p>An element without attributes.</p>
</div>
MIT. © 2017 Michael Cavalea