English
👋
Atomico
A micro library inspired by React Hooks, designed and optimized for the creation of webcomponents.
JSX
TSX
JS
Browser
1
import { c } from "atomico"; // 2.5kB
2
3
function component({ name }) {
4
return <host shadowDom>Hello, {name}</host>;
5
}
6
7
component.props = {
8
name: String,
9
};
10
11
customElements.define("my-component", c(component));
Copied!
1
import { Props, c } from "atomico"; // 2.5kB
2
3
function component({ name }:Props<typeof component.props>) {
4
return <host shadowDom>Hello, {name}</host>;
5
}
6
7
component.props = {
8
name: String,
9
};
10
11
customElements.define("my-component", c(component));
Copied!
1
import { c, html } from "atomico"; // 3.0kB
2
3
4
function component({ name }) {
5
return html`<host shadowDom>Hello, ${name}</host>`;
6
}
7
8
component.props = {
9
name: String,
10
};
11
12
customElements.define("my-component", c(component));
Copied!
1
import { c, html } from "https://unpkg.com/atomico"; // 4.0kB
2
3
4
function component({ name }) {
5
return html`<host shadowDom>Hello, ${name}</host>`;
6
}
7
8
component.props = {
9
name: String,
10
};
11
12
customElements.define("my-component", c(component));
Copied!
Atomico simplifies learning, workflow and maintenance when creating webcomponents and achieves it with:
- 1.scalable and reusable interfaces: with Atomico the code is simpler and you can apply practices that facilitate the reuse of your code.
- 2.Open communication: with Atomico you can communicate states by events, properties or methods.
- 3.Agnostic: your custom Element will work in any web-compatible library, eg React, Vue, Svelte or Angular.
- 4.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.
Api
Last modified 6mo ago
Copy link
Contents
Api