Nocturnal Pumpkin Maelstrom

    @nicolasparada/el

    0.5.0 • Public • Published

    @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.

    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')
    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.

    Install

    npm i @nicolasparada/el

    DownloadsWeekly Downloads

    3

    Version

    0.5.0

    License

    ISC

    Unpacked Size

    4.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • nicolasparada