Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

atomico

1.5.1 • Public • Published

Atomico

CircleCI npm gzip

Español - English

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

import { h, c } from "atomico";
 
const MyComponent = () => <host>mi primer webcomponent con atomico</host>;
 
const HTMLMyComponent = c(MyComponent);
 
customElements.define("my-web-component", HTMLMyComponent);

Links:

  1. What is Atomico?
  2. Api
    1. Props
    2. Hooks
    3. Virtual-dom
    4. Typescript
  3. Guides
    1. Project generator
  4. Resources
    1. Brand

What is Atomico?

Atómico is a modern syntax micro-library created by Matias Trujillo alias @UpperCod, which simplifies the creation of webcomponents by replacing the need to use classes and contexts by functions and scope to support logic, attributes, properties, methods and events, example:

const MyComponent = () => {
    const [count, setCount] = useProp("count");
    const increment = () => setCount(count + 1);
    return <host increment={increment}>count: {count}</host>;
};
 
MyComponent.props = {
    count: { type: Number, value: 0 },
};

Where:

  1. MyWebComponent: Function that represents the webcomponent.

  2. const [count, setCount] = useProp("count"): Hook function similar to useState, but with the difference that useProp reflects the property status of the component.

  3. const increment = () => setCount(count + 1);: Function that increases the state.

  4. <host increment={increment}>: Virtual-dom represented the incremental method.

  5. MyComponent.props.count : Object, defines the behavior of the count property.

    1. type: Number : Declare count as type number.
    2. value: 0: Declares that the initial state of count is0.

Install

npm i atomico

DownloadsWeekly Downloads

538

Version

1.5.1

License

ISC

Unpacked Size

131 kB

Total Files

45

Last publish

Collaborators

  • avatar