Napolean Paced Mischeviously
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    preact-elementpublic

    preact element logo

    ⚡️ A better element creation function (h) for preact

    Build status NPM version Dependency Status License Js Standard Style

    Why?

    • You want to use preact with no build tool
    • You are not in favor of extending the language with non-standard extensions

    Why not preact's h?

    Creating and reading dom structures is the bread and butter in creating UI. It should have minimal boilerplate. Thats what this library does - removing boilerplate.

    // preact 
    h('div', null,
      h('p', null, 'Hello World!')
    )
     
    // preact-element 
    div(
      p('Hello World!')
    )

    Getting Started

    With preact-element installed (using your favourite package manager), you can then import it. Each element in the DOM is exposed as a function when requiring preact-element.

    Plain commonjs

    const h = require('preact-element') // -> h.div() 

    Destructuring

    const { div, h1 } = require('preact-element')

    ES6

    import { div, h1 } from 'preact-element'

    Use it!

    import { div, h1, h2, h3, button, ul, li } from 'preact-element'
    import { render } from 'preact'
     
    const App = ({ library }) => div(
      h1({ class: 'bold' }, library),
      h2({ id: 'subitle' }, 'Preact is a fast, 3kb alternative to React, with the same ES2015 API'),
      button({ href: 'http://ghub.io/preact' }, 'Learn More'),
     
      h3('Features'),
      ul(['preact', 'small', 'es2015', 'fast'].map(key => li(key)))
    )
     
    render(
      h(App, { library: 'Preact' }),
      document.body
    )

    API

    attributes and children are optional.

    createElement(tag, attributes?, ...children?)

    [tag](attributes?, ...children?)

    Where as tag is one of the html tags or svg tags.

    Author

    preact-element © Fabian Eichenberger, Released under the MIT License.
    Authored and maintained by Fabian Eichenberger with help from contributors (list).

    GitHub @queckezz · Twitter @queckezz

    install

    npm i preact-element

    Downloadslast 7 days

    1

    version

    1.0.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar