https://github.com/wrumsby/dom-builder

A function to help build DOM trees
https://github.com/wrumsby/dom-builder

Last synced: about 2 months ago
JSON representation

A function to help build DOM trees

• Host: GitHub
• URL: https://github.com/wrumsby/dom-builder
• Owner: wrumsby
• Created: 2016-01-09T09:53:47.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-09T10:06:58.000Z (almost 9 years ago)
• Last Synced: 2024-04-14T18:20:13.798Z (9 months ago)
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# dom-builder

[![Build Status](https://travis-ci.org/wrumsby/dom-builder.svg)](https://travis-ci.org/wrumsby/dom-builder)

A function to help build DOM trees.

## Installation

```bash

bower install dom-builder --save

```

You can use the [resolve-bower-module](https://www.npmjs.com/package/babel-plugin-resolve-bower-module) Babel plugin to resolve modules that are imported with Bower.

## Usage

```js

import dom from 'dom-builder';

const el = dom('div', null,

  dom('img.profile', { src: 'avatar.png' }),

  dom('h3', null, [user.firstName, user.lastName].join(' '))

);

```

You can also use the [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/) Babel plugin to use dom-builder with JSX syntax by specifiying a `pragma` when configuring the plugin, e.g.

```json

{

  "plugins": [

    ["transform-react-jsx", { "pragma": "dom" }]

  ]

}

```

With that configuration the code sample below will produce the same output as the code sample above.

```js

import dom from 'dom-builder';

const el = 


  

  
{[user.firstName, user.lastName].join(' ')}

;

```