https://github.com/ryanmorr/dominate

Declarative DOM building
https://github.com/ryanmorr/dominate

declarative dom html javascript

Last synced: 4 months ago
JSON representation

Declarative DOM building

• Host: GitHub
• URL: https://github.com/ryanmorr/dominate
• Owner: ryanmorr
• License: unlicense
• Created: 2016-05-25T19:00:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-07-20T07:41:17.000Z (over 1 year ago)
• Last Synced: 2024-04-14T22:47:16.367Z (10 months ago)
• Topics: declarative, dom, html, javascript
• Language: JavaScript
• Homepage:
• Size: 523 KB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# dominate

[![Version Badge][version-image]][project-url]

[![License][license-image]][license-url]

[![Build Status][build-image]][build-url]

> Declarative DOM building

## Install

Download the [CJS](https://github.com/ryanmorr/dominate/raw/master/dist/cjs/dominate.js), [ESM](https://github.com/ryanmorr/dominate/raw/master/dist/esm/dominate.js), [UMD](https://github.com/ryanmorr/dominate/raw/master/dist/umd/dominate.js) versions or install via NPM:

``` sh

npm install @ryanmorr/dominate

```

## Usage

Import the library:

``` javascript

import dominate from '@ryanmorr/dominate';

```

Convert a single element HTML string into a DOM element:

``` javascript

const div = dominate`
`;

```


Convert multiple elements into a document fragment:

``` javascript

const fragment = dominate`
`;

```


Convert plain text to a DOM text node:

``` javascript

const text = dominate`This is plain text.`;

```

Supports self-closing and auto-closing tags:

``` javascript

const div = dominate`
`;

const span = dominate`/>`;

```


Set attributes:

``` javascript

const div = dominate`
`;

```


Set the class with an array or object:

``` javascript

const div = dominate`
`;

const span = dominate``;

```


Set CSS styles as a string or an object:

``` javascript

const div = dominate`
`;

const span = dominate``;

```


Add event listeners:

``` javascript

const div = dominate`
 console.log('clicked!')}>
`;

```


Inject DOM nodes:

``` javascript

const div = dominate`
${dominate``}
`;

```


Supports SVG elements:

``` javascript

const rect = dominate``;

```

Supports functional components:

``` javascript

const Component = (attributes, children) => {

    return dominate`
${children}
`

};


const div = dominate`<${Component} id="foo">bar/>`;

```

Can return multiple element references via the `ref` attribute:

``` javascript

const { foo, bar, baz } = dominate`

    


        

        

    

`;

```


## License

This project is dedicated to the public domain as described by the [Unlicense](http://unlicense.org/).

[project-url]: https://github.com/ryanmorr/dominate

[version-image]: https://img.shields.io/github/package-json/v/ryanmorr/dominate?color=blue&style=flat-square

[build-url]: https://github.com/ryanmorr/dominate/actions

[build-image]: https://img.shields.io/github/actions/workflow/status/ryanmorr/dominate/node.js.yml?style=flat-square

[license-image]: https://img.shields.io/github/license/ryanmorr/dominate?color=blue&style=flat-square

[license-url]: UNLICENSE