https://github.com/gvergnaud/vdom-tag

A template literals tag function to build a virtual dom tree
https://github.com/gvergnaud/vdom-tag

dom html template-tags virtual-dom

Last synced: about 2 months ago
JSON representation

A template literals tag function to build a virtual dom tree

• Host: GitHub
• URL: https://github.com/gvergnaud/vdom-tag
• Owner: gvergnaud
• Created: 2018-04-29T14:25:14.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-30T08:18:29.000Z (almost 7 years ago)
• Last Synced: 2024-10-06T09:43:53.485Z (4 months ago)
• Topics: dom, html, template-tags, virtual-dom
• Language: JavaScript
• Homepage:
• Size: 59.6 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vdom-tag

Es6 Tag function to create a virtual-dom tree from a template literal.

Very similar to [hyperx](https://github.com/choojs/hyperx), but has a better

support for custom components and supports multiple root elements.

This package does not provide any way to render the tree, you have to combine it

with a virtual dom implementation to make it useful (e.g. virtual-dom, React, ...).

```

npm install vdom-tag

```

### Examples

```js

import h from 'virtual-dom/h'

import createElement from 'virtual-dom/create-element'

import createTag from 'vdom-tag'

const html = createTag(h)

const title = 'world'

const tree = html`

  


    
hello ${title}!


    
Connected users

    


      ${['Oh', 'My', 'God'].map(name => html`

        
 console.log(name, 'clicked!')}>

          ${name}

        

      `)}

    

  

`


document.body.appendChild(createElement(tree))

```

### Features

#### Multiple root elements

```js

const list = html`

  
No

  
need

  
for

  
React.Fragment

  
!!

`


const app = html`

  


    ${list}

  

`


document.body.appendChild(createElement(app))

```

#### Custom elements

```js

const MyComponent = () => html`
hey
`

const tree = html`

  


    <${MyComponent} />

  

`

```


#### With React

```js

import React from 'react'

import { render } from 'react-dom'

import createTag from 'vdom-tag'

const html = createTag(React.createElement)

const App = ({ name = 'React' }) => html`

  
Hello, ${name}!

`


render(, document.querySelector('#root'))

```