https://github.com/lexi-lambda/template-dom
A library for creating (V)DOM nodes using ES2015 tagged template strings
https://github.com/lexi-lambda/template-dom
Last synced: 10 months ago
JSON representation
A library for creating (V)DOM nodes using ES2015 tagged template strings
- Host: GitHub
- URL: https://github.com/lexi-lambda/template-dom
- Owner: lexi-lambda
- Created: 2016-09-11T22:01:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-11T22:38:52.000Z (over 9 years ago)
- Last Synced: 2025-01-30T02:10:03.720Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# template-dom [](https://travis-ci.org/lexi-lambda/template-dom)
This package provides a way to use ES2015 tagged template strings to create (virtual) DOM nodes without needing to use HTML syntax or any runtime parsing. It works with any (V)DOM library you want to use.
## Installation
```
$ npm install template-dom
```
## Quick Start
### With `virtual-dom`
```js
import templateDom from 'template-dom';
import h from 'virtual-dom/h';
const D = templateDom(h);
```
### With `react`
```js
import templateDom from 'template-dom';
import { createElement } from 'react';
const D = templateDom(createElement);
```
### Creating an element
```js
const page =
D.div `
${D.h1 `Hello, world!`}
${D.p `This is a paragraph with some ${D.strong `bold`} text.`}
${D.button({ class: 'big' }) `Click Me`}`
```
## More Details
The `template-dom` module’s default export is a function that expects a single argument. The provided argument should be a function with the following signature:
```
(tag, attrs, children) -> any
```
This function will be used by `template-dom` to create a node from a tagged template string.
The base function provided by `template-dom` is `element`, which allows creating nodes of a particular type. For example, using React:
```js
const el = templateDom(React.createElement).element;
const PageHeader = ({ text }) =>
el('h1', { className: 'page-header' }) `Page: ${text}`;
```
The first argument to `element` does not need to be a string, so it can be used with React components, for example.
In addition to the `element` function, `template-dom` provides helper functions that are partially-applied versions of `element`, specialized to HTML tags. These can be used instead of passing a string to the `element` function:
```js
const { div, h1, p } = templateDom(React.createElement);
const page = div `
${h1 `Hello!`}
${p `Here is some text.`}`;
```