naro

A tiny library for building UIs with template literals and a lightweight virtual DOM.

Installation

## Install using NPM
$ npm install --save naro

## Install using Yarn
$ yarn add naro

Usage

import { html, render } from "naro";

render(html`<div align="center">Hello world</div>`, document.getElementById("root"));

API

h(type, props[, ...children])

Creates a new VDOM Node element of the specified type, with the specified props and children.

import { h } from "naro";

h("div", { align: "center" }); // --> <div align="center"></div>

h("div", {}, "Hello world"); // --> <div>Hello world</div>

This method does not return a DOM element. It returns a Virtual DOM Node element, which is a JSON representation of the DOM element.

To transform it into a real DOM element, use render.

Type

The type argument should be either a tag name string (such as "div" or "a").

// Using a tag name
h("a", { href: "https://google.es" }, "Click me!"); 
// Renders to: <a href="https://google.es">Click me!</a>

Props

The props argument is an object with the data of the element. This can include HTML attributes, events listeners or custom properties that our functional element will use.

h("div", {
    className: "button",
    onclick: event => { /* Handle click event */ },
    id: "button1",
});

Class names

Use the className property to set the CSS class.

h("div", { className: "button" }, "Button");

Events

Attach a callback listener to an event.

h("div", {
    onclick: event => { /* Handle click event */ },
    onmousedown: event => { /* Handle mouse down event */ },
    onmouseup: event => { /* Handle mouse up event */ },
});

References

Use the ref property to save a reference of the element.

import { h, createRef, render } from "naro";

// 1. use n.ref to generate a reference variable
const inputRef = createRref();

// 2. assign inputRef to an element
render(h("input", { ref: inputRef }), document.getElementById("root"));

// 3. now you can access to the referenced element
console.log(inputRef.current.value);

Styles

You can provide an object with the style of the element. All styles attributes should be in camel-case format.

h("div", {
    style: {
        backgroundColor: "blue",
        color: "white",
    },
    align: "center"
}, "Hello");

html

A JavaScript template tag that converts a JSX-like syntax into a VDOM tree, that you can use with render.

Example:

import { html, render } from "naro";

const userHtml = render(html`
    <div align="center">
        <img className="avatar" src="/path/to/user.png" />
        <span>Hello user</span>
    </div>
`);

Features:

• Dynamic props: <div align="${currentAlign}" />.
• Dynamic content: <div>Hello ${name}</div>.
• Events: <div onClick="${() => console.log("clicked")}"></div>.
• Spread props: <div ...${extraProps}>.

render(element, parent)

Renders a VDOM Node to the DOM.

import { h, render } from "naro";

render(h("div", {}, "Hello world!"), document.getElementById("root"));

The first arguments is the VDOM Node to render, and the second argument is the parent DOM element. Returns a reference to the rendered DOM element.

createRef()

Returns a new object with a single key current initialized to null. Use this object to save a reference to rendered elements with render.

import { html, createRef, render } from "naro";

// 1. use n.ref to generate a reference variable
const inputRef = createRref();

// 2. assign inputRef to an element
render(html`<input ref="${inputRef}" />`, document.getElementById("root"));

// 3. now you can access to the referenced element
console.log(inputRef.current.value);

License

naro is released under the MIT LICENSE.