Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/developit/vhtml
Render JSX/Hyperscript to HTML strings, without VDOM 🌈
https://github.com/developit/vhtml
html-string hyperscript jsx preact vdom virtual-dom
Last synced: 29 days ago
JSON representation
Render JSX/Hyperscript to HTML strings, without VDOM 🌈
- Host: GitHub
- URL: https://github.com/developit/vhtml
- Owner: developit
- License: mit
- Created: 2016-03-13T01:29:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-15T08:46:22.000Z (3 months ago)
- Last Synced: 2024-05-15T19:54:21.308Z (about 2 months ago)
- Topics: html-string, hyperscript, jsx, preact, vdom, virtual-dom
- Language: JavaScript
- Homepage: http://npm.im/vhtml
- Size: 19.5 KB
- Stars: 760
- Watchers: 11
- Forks: 33
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - developit/vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (others)
- awesome-stars - developit/vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)
- awesome-stars - developit/vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)
- awesome-stars - vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)
- awesome-stars - vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)
- awesome-stars - vhtml
- awesome - vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)
README
# vhtml
[](https://www.npmjs.org/package/vhtml)
[](https://travis-ci.org/developit/vhtml)
### **Render JSX/Hyperscript to HTML strings, without VDOM**
> Need to use HTML strings (angular?) but want to use JSX? vhtml's got your back.
>
> Building components? do yourself a favor and use [
](https://github.com/developit/preact)
[**JSFiddle Demo**](https://jsfiddle.net/developit/9q0vyskg/)
---
## Installation
Via npm:
`npm install --save vhtml`
---
## Usage
```js
// import the library:
import h from 'vhtml';
// tell babel to transpile JSX to h() calls:
/** @jsx h */
// now render JSX to an HTML string!
let items = ['one', 'two', 'three'];
document.body.innerHTML = (
Hi!
Here is a list of {items.length} items:
{ items.map( item => (
- { item }
)) }
);
```
### New: "Sortof" Components!
`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".
When `vhtml` 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, except `children` 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:
```js
let items = ['one', 'two'];
const Item = ({ item, index, children }) => (
{item}
{children}
);
console.log(
Hi!
{ items.map( (item, index) => (
This is item {item}!
)) }
);
```
The above outputs the following HTML:
```html
Hi!
-
one
This is item one!
-
two
This is item two!
```