Skip to content

ryanmorr/dominate

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

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

Stars

Watchers

Forks

Packages

No packages published