https://github.com/atomicojs/docs
https://github.com/atomicojs/docs
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/atomicojs/docs
- Owner: atomicojs
- Created: 2019-12-07T16:16:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T16:05:36.000Z (over 1 year ago)
- Last Synced: 2025-08-06T05:48:53.393Z (11 months ago)
- Size: 2.93 MB
- Stars: 0
- Watchers: 0
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
description: >-
A micro library inspired by React Hooks, designed and optimized for the
creation of webcomponents.
---
# 👋 Atomico
{% tabs %}
{% tab title="JSX" %}
```jsx
import { c } from "atomico"; // 2.5kB
const MyComponent = c(
()=>Hello, {name},
{
props: { name: String }
}
);
customElements.define("my-component", c(component));
```
{% endtab %}
{% tab title="TSX" %}
```jsx
import { Props, c } from "atomico"; // 2.5kB
function component({ name }:Props) {
return Hello, {name};
}
component.props = {
name: String,
};
customElements.define("my-component", c(component));
```
{% endtab %}
{% tab title="JS" %}
```javascript
import { c, html } from "atomico"; // 3.0kB
function component({ name }) {
return html`Hello, ${name}`;
}
component.props = {
name: String,
};
customElements.define("my-component", c(component));
```
{% endtab %}
{% tab title="Browser" %}
```javascript
import { c, html } from "https://unpkg.com/atomico"; // 4.0kB
function component({ name }) {
return html`Hello, ${name}`;
}
component.props = {
name: String,
};
customElements.define("my-component", c(component));
```
{% endtab %}
{% endtabs %}
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**](https://twitter.com/atomicojs/status/1391775734641745929) in a comparison of 55 libraries among which is React, Vue, Stencil and Lit.
### API
{% content-ref url="api/props/" %}
[props](api/props/)
{% endcontent-ref %}
{% content-ref url="api/virtualdom/" %}
[virtualdom](api/virtualdom/)
{% endcontent-ref %}
{% content-ref url="api/hooks/" %}
[hooks](api/hooks/)
{% endcontent-ref %}
{% content-ref url="api/testing/" %}
[testing](api/testing/)
{% endcontent-ref %}