Powered by GitBook

1 of 1

Loading...

Atomico

A micro library inspired by React Hooks, designed and optimized for the creation of webcomponents.

Atomico simplifies learning, workflow and maintenance when creating webcomponents and achieves it with:

Scalable and reusable interfaces: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code.

Open communication: with Atomico you can communicate states by events, properties or methods.

Agnostic: your custom Element will work in any web-compatible library, eg React, Vue, Svelte or Angular.

Performance: Atomico has a comparative performance at Svelte levels, winning the third position in performance according to webcomponents.dev in a comparison of 55 libraries among which is React, Vue, Stencil and Lit.

import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

customElements.define("my-component", c(component));

import { c } from "atomico"; // 2.5kB

const MyComponent = c(
  ({name})=><host shadowDom>Hello, {name}</host>,
  {
    props: { name: String }
  }
);

customElements.define("my-component", c(component));

API

Props(Properties)