Repository files navigation

Need to use HTML strings (angular?) but want to use JSX? vhtml's got your back.

Building components? do yourself a favor and use

JSFiddle Demo

Via npm:

npm install --save vhtml

// import the library:importhfrom'vhtml';// tell babel to transpile JSX to h() calls:/**@jsx h */// now render JSX to an HTML string!letitems=['one','two','three'];document.body.innerHTML=(<divclass="foo"><h1>Hi!</h1><p>Here is a list of{items.length} items:</p><ul>{items.map(item=>(<li>{item}</li>))}</ul></div>);

vhtml intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML.However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".

Whenvhtml is given a Function as the JSX tag name, it will invoke that function and pass it{ children, ...props }.This is the same signature as a Pure Functional Component in react/preact, exceptchildren is an Array of already-serialized HTML strings.

This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.

Here's a more complex version of the previous example that uses a component to encapsulate iteration items:

letitems=['one','two'];constItem=({ item, index, children})=>(<liid={index}><h4>{item}</h4>{children}</li>);console.log(<divclass="foo"><h1>Hi!</h1><ul>{items.map((item,index)=>(<Item{...{ item, index}}>          This is item{item}!</Item>))}</ul></div>);

The above outputs the following HTML:

<divclass="foo"><h1>Hi!</h1><ul><liid="0"><h4>one</h4>This is item one!</li><liid="1"><h4>two</h4>This is item two!</li></ul></div>