Miss any of our Open RFC calls?Watch the recordings here! »


0.8.5 • Public • Published



CircleCI npm gzip

Small library for the creation of interfaces based on web-components, only using functions and hooks, if you want to try Atomico and you need help tell me in Twitter Uppercod 🤓.


  1. Installation, npm init @atomico
  2. Hooks
    1. useState
    2. useEffect
    3. useReducer
    4. useMemo
    5. useRef
    6. useHost
  3. Modules
    1. atomico/lazy
    2. atomico/router
  4. Examples
    1. small Store, PWA
    2. Small ToDo, 4kB
  5. Observables
    1. Types of observables
  6. Styling a web-component


Atomico has a project generator, you can initialize using npm init @atomico.

npm init @atomico
Welcome to Atomico, let's create your project
√ name? ... project-name
√ description? ... project-description
Ready!, check the folder ./project-name and ./project-name/README.md
Next step, commands!
  cd project-name
  yarn | npm i

Alternatively, if you have an existing project you can incorporate Atomico simply using, JS pragma used by Atomico is defined as part of the module exporting h orcreateELement.

npm install atomico

⚠️ Remember Atomico is a modern package, which is distributed and maintained as an MJS module


What are hooks?

Hooks, allows to add states and effects(life cycle) to functional components, allowing to reuse the logic between components in a simple and scalable way.

Why use hooks?

  1. Reuse of logic between components, unlike a class its components will not require belonging to the context of this.

  2. Simpler and less code, when using hooks your component will not require a declaration as a class, bringing as a benefit less code as your application scales.


let [state, setState] = useState(initialState);

setState function, allows controlling one or more states associated with a component, the declarationlet [state, setState], is equivalent to:

  1. state : current state
  2. setState : status updater, if setState receives a function as a parameter it will receive and must return the next state.


function WebComponent() {
    let [state, setState] = useState(0);
    return (
            <h1>example counter</h1>
            <button onClick={() => setState(state + 1)}>Increment</button>

🔗 Example in codesanbox



useEffect function allows you to add side effects to a component.

function WebComponent() {
    useEffect(() => {
        document.head.title = "web-component mounted";
        return () => (document.head.title = "web-component unmounted");
    }, []);
    return (
            <h1>example useEffect</h1>

useEffect, supports a second matrix of type of parameter, this allows to compare between renders the immutability of the parameters of the array, if there is a change useEffect will be executed again, the previous example will execute the function only when the component has been mounted.

🔗 Example in codesanbox


let [state, dispatch] = useReducer(reducer, initialState);

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.

const initialState = { count: 0 };
function reducer(state, action) {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
            throw new Error();
function WebComponent() {
    let [state, dispatch] = useReducer(reducer, initialState);
    return (
            Count: {state.count}
            <button onClick={() => dispatch({ type: "increment" })}>+</button>
            <button onClick={() => dispatch({ type: "decrement" })}>-</button>


let memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo will only recalculate the stored value when one of the dependencies has changed. This optimization helps avoid costly calculations in each render.


let ref = useRef(initialValue);

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.


let ref = useHost();

Returns a ref object, which allows to extract extract the web-component, it is ideal for the construction of hooks that interact with web-components directly.


The observables are a layer of the statico method observedAttributes characteristic of web-components. using a key object and value you can define attributes and properties, the key format of the observable is camelCase, which Atomico will transform into a valid attribute, examplemyPropertywill be the attributemy-property.

import { h, customElement } from "atomico";
function WebComponent({ message, showMessage }) {
    return <host>my {showMessage && message}!</host>;
WebComponent.observables = {
    message: String,
    showMessage: Boolean
customElement("web-component", WebComponent);

Example of use from HTML

<web-component show-message message="Atomico"></web-component>

Example of use from the JS

let wc = document.querySelector("web-component");
wc.showMessage = true;
wc.message = "Atomico";

Types of observables

The types are defined by the use of primitive constructors, eg String, Number or Object.

Type Description
String -
Number -
Boolean It is reflected, this status is shown as an attribute in the web-component
Object -
Array -
Promise -
Function If this one comes from an attribute Atomico will look for the callback in window

Styling a web-component

To nest encapsulated styles within the web-component, you must enable the use of shadowDom, use <host shadowDom>.

Tag style

Style generation can be declared inside the <style> tag, this form allows the generation of dynamic styles.

import { h, customElement, css } from "atomico";
function WebComponent() {
    return (
        <host shadowDom>
                :host {
                    color: red;
customElement("web-component", WebComponent);

Import css

You can import using the plugins @atomico/rollup-plugin-import-css, css in flat format, preprocessed by postcss, by default this already delivered minified.

import { h, customElement, css } from "atomico";
import style from "./style.css";
function WebComponent() {
    return (
        <host shadowDom>
customElement("web-component", WebComponent);


Atomico supports the definition of styles created by the CSSStyleSheet constructor.

import { h, customElement, css } from "atomico";
function WebComponent() {
    return <host shadowDom>hello!</host>;
WebComponent.styles = [
        :host {
            color: red;
customElement("web-component", WebComponent);


npm i [email protected]





Unpacked Size

144 kB

Total Files


Last publish


  • avatar