Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

dominate

Version Badge Build Status License

Declarative DOM building

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/dominate

Usage

Import the library:

import dominate from '@ryanmorr/dominate';

Convert a single element HTML string into a DOM element:

const div = dominate`<div></div>`;

Convert a multiple element HTML string into a document fragment:

const fragment = dominate`<div></div><span></span>`;

Convert plain text to a DOM text node:

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

Supports self-closing and auto-closing tags:

const div = dominate`<div />`;
const span = dominate`<span><//>`;

Set attributes:

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

Set CSS styles as a string or an object:

const div = dominate`<div style=${{width: '100px', height: '100px'}}></div>`;
const span = dominate`<span style=${'color: red; position: static;'}></span>`;

Add event listeners:

const div = dominate`<div onclick=${(e) => console.log('clicked!')}></div>`;

Inject DOM nodes:

const div = dominate`<div>${dominate`<span />`}</div>`;

Supports SVG elements:

const rect = dominate`<rect x="10" y="10" width="100" height="100"/>`;

Supports functional components:

const Component = (attributes, children) => dominate`<div ...${attributes}>${children}</div>`;
const div = dominate`<${Component} id="foo">bar<//>`;

Return multiple element references via the ref attribute:

const { foo, bar, baz } = dominate`
    <div ref="foo">
        <span ref="bar"></span>
        <em ref="baz"></em>
    </div>
`;

License

This project is dedicated to the public domain as described by the Unlicense.

About

Declarative DOM building

Topics

Resources

License

Packages

No packages published
You can’t perform that action at this time.