Update the DOM Easily with the Re:dom Library

We can update the DOM with the Re:dom library in a way easier than plain JavaScript.

In this article, we’ll look at how to use the library to diff the DOM and patch it.

Installation

We can install the Dom Diff library by running:

npm install redom

Adding Elements

We can add elements with the el method.

To use it, we write:

import { el, mount } from "redom";

const hello = el("h1", "Hello world!");

mount(document.body, hello);

The first argument is the tag name.

The 2nd argument is text content.

The mount method mounts the hello DOM object into the body element.

We can also change the element after we created it:

import { text, mount } from "redom";

const hello = text("hello");

mount(document.body, hello);

hello.textContent = "hi!";

Now we see hi! on the screen instead of hello since we changed it by changing the textContent property.

The first argument of el can be a CSS selector.

For example, we can write:

import { el, mount } from "redom";

const hello1 = el("", "hello1");
const hello2 = el("#hello", "hello2");
const hello3 = el(".hello", "hello2");
const hello4 = el("span.hello", "hello4");
mount(document.body, hello1);
mount(document.body, hello2);
mount(document.body, hello3);
mount(document.body, hello4);

If no tag name is specified, then it’ll be a div.

Otherwise, it’ll create the element specified.

So, span.hello will be rendered as a span and the rest are divs.

Also, we can specify the styles with an object:

import { el, mount } from "redom";

const hello1 = el("", { style: "color: red;" }, "hello1");
const hello2 = el("#hello", { style: { color: "green" } }, "hello2");

mount(document.body, hello1);
mount(document.body, hello2);

The 2nd argument has the styles and the 3rd has the text content.

We can also specify attributes in the object in the 2nd argument:

import { el, mount } from "redom";

const input = el("input", { type: "email", autofocus: true, value: "foo" });

mount(document.body, input);

We can also nest child elements with el :

import { el, mount } from "redom";

const element = el("ul", el("li", el("span", "hello")));

mount(document.body, element);

We created a ul with an li inside and a span inside.

Also, we can pass in an array of element objects with el :

import { el, mount } from "redom";

const element = el("ul", [el("li", "foo"), el("li", "bar")]);

mount(document.body, element);

We have a ul with li elements inside.

To display something conditionally, we can add the condition to display the content with plain JavaScript:

import { el, mount } from "redom";
const forgot = false;

const element = el(
  "form",
  el("input", { type: "email", placeholder: "email" }),
  !forgot && el("input", { type: "password", placeholder: "password" })
);

mount(document.body, element);

We only display the password field only if forgot is false .

Middleware

The 2nd argument of el can also make a middleware function which lets us manipulate the created DOM element:

import { el, mount } from "redom";
const element = el("h1", middleware, "Hello!");

function middleware(el) {
  el.style.color = "green";
}

mount(document.body, element);

Now Hello is green.

Conclusion

We can use the Re:dom library to manipulate the DOM more easily.