Skip to content
master
Go to file
Code

README.md

hybrids - the web components

npm version bundle size types build status coverage status npm gitter twitter Conventional Commits code style: prettier GitHub

πŸ…One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019

hybrids is a UI library for creating web components with unique declarative and functional approach based on plain objects and pure functions.

  • The simplest definition β€” just plain objects and pure functions - no class and this syntax
  • No global lifecycle β€” independent properties with own simplified lifecycle methods
  • Composition over inheritance β€” easy re-use, merge or split property descriptors
  • Super fast recalculation β€” smart cache and change detection mechanisms
  • Global state management - model definitions with support for external storages
  • Templates without external tooling β€” template engine based on tagged template literals
  • Developer tools included β€” HMR support out of the box for a fast and pleasant development

Quick Look

Add the hybrids npm package to your application, import required features, and define your custom element:

import { html, define } from 'hybrids';

export function increaseCount(host) {
  host.count += 1;
}

export const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
};

define('simple-counter', SimpleCounter);

Use the custom element in HTML document:

<simple-counter count="10"></simple-counter>

Click and play with <simple-counter> example:

Edit <simple-counter> web component built with hybrids library

Documentation

The project documentation is available at the hybrids.js.org site.

License

hybrids is released under the MIT License.

You can’t perform that action at this time.