https://github.com/nicolasparada/js-el

Utility to create HTML elements
https://github.com/nicolasparada/js-el

html-element npm-package

Last synced: 6 days ago
JSON representation

Utility to create HTML elements

• Host: GitHub
• URL: https://github.com/nicolasparada/js-el
• Owner: nicolasparada
• License: isc
• Created: 2018-01-27T14:43:27.000Z (almost 7 years ago)
• Default Branch: main
• Last Pushed: 2023-03-23T00:54:25.000Z (over 1 year ago)
• Last Synced: 2024-05-23T07:24:31.305Z (6 months ago)
• Topics: html-element, npm-package
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [`@nicolasparada/el`](https://npm.im/@nicolasparada/el)

Utility to create HTML elements with ease. Inspired in `React.createElement`, but for actual DOM. It has nothing to do with rendering or diffing.

## Usage

Load it from [unpkg.com](https://unpkg.com/@nicolasparada/el).

```js

import el from 'https://unpkg.com/@nicolasparada/el'

let button

const div = el('div', { className: 'container' }, [

    el('button', { ref: buttonRef, onclick }, 'Click me'),

])

function buttonRef(el) {

    button = el

}

function onclick(ev) {

    console.log('Click', ev)

}

console.assert(div instanceof HTMLDivElement)

console.assert(div.className === 'container')

console.assert(div.childNodes.length === 1)

console.assert(button instanceof HTMLButtonElement)

console.assert(button.onclick === onclick)

console.assert(button.textContent === 'Click me')

```

```js

function el(tagName, props, ...children)

```

- `tagName`: is a `string` with the tag name of the `HTMLElement` to create.

- `props`: is a `Object` mix with properties and attributes to set. The special `ref` prop comes handy to save a reference to the element. You can attach an event listener prefixing the event name with 'on' ex: `{ onsomeevent: onSomeEvent }`.

- `children`: is variadic; this argument will be flatten so you can pass a comma separated list of children or an array.

This function will return an instance of `HTMLElement`.