useProp allows you to work with a prop(property) of the webcomponent in a similar way to useState.

Syntax

const [value, setValue] = useProp(myProp);

Where :

• value: Current value of the prop.

• setValue: Callback to update the value of the prop.

• myProp: string, defines the name of the prop to be used by the hook.

Example

import { useProp } from "atomico";

function useCounter(prop) {
  const [value, setValue] = useProp(prop);
  return {
    value,
    increment: () => setValue((value) => value + 1),
    decrement: () => setValue((value) => value - 1),
  };
}

function component() {
  const counter = useCounter("value");
  return (
    <host>
      <button onClick={counter.increment}>+</button>
      <strong>{counter.value}</strong>
      <button onClick={counter.decrement}>-</button>
    </host>
  );
}

component.props = {
  value: { type: Number, value: 0 },
};

import { useProp } from "atomico";

function useCounter(prop) {
  //                                 👇 type for prop
  const [value, setValue] = useProp<number>(prop);
  return {
    value,
    increment: () => setValue((value) => value + 1),
    decrement: () => setValue((value) => value - 1),
  };
}

function component() {
  const counter = useCounter("value");
  return (
    <host>
      <button onClick={counter.increment}>+</button>
      <strong>{counter.value}</strong>
      <button onClick={counter.decrement}>-</button>
    </host>
  );
}

component.props = {
  value: { type: Number, value: 0 },
};

Where:

1. useCounter is a customHook and that it can work with any property of the webcomponent of type Number.

2. useCounter returns 2 methods increment and decrement that modify the value of the prop.

3. useCounter can be instantiated multiple times for different properties.

Syntax

const [state, setState] = useState(optionalInitialState);

Where:

1. const [state,setState] : Return of useState, the arguments allow reading and updating of the state associated with the hook instance.

   • state : Current state.

   • setState: Current status updater.

2. useState( optionalInitialState ): Function that associates the state to the webcomponent:

   • optionalInitialState: Optional parameter that defines the initial state associated to the hook instance, If optionalInitialState is a function it will be executed in order to obtain the initial state only at the moment of the hook instance for the first time.

Example

function MyComponent() {
  const [count, setCount] = useState(0);
  return <host onclick={() => setCount(count + 1)}> {count} </host>;
}

Syntax

const refHost = useHost();

Returns the instance of the webcomponent in reference format, this reference allows to extend behaviors when creating customHooks.

Example

import { useHost, useEffect } from "atomico";

function useListener(type: string, callback: (ev: Event) => void) {
  const ref = useHost();
  useEffect(() => {
    const { current } = ref;
    current.addEventListener(type, callback);
    return () => current.removeEventListener(type, callback);
  }, []);
}

From the example we can highlight that useListener is a customHook that allows listening to an event from the webcomponent without the need to link said event to the VirtualDOM.

Hooks only for webcomponents

Hooks homogolates of React

@atomico/hooks

Atomico today offers more Hooks external to the core, we invite you to visit @atomico/hooks with more than 50 hooks to enhance the use of webcomponents 😎

Syntax

Where :

1. effectCallback : Function that is executed one or more times according to optionalArgumentList,effectCallback can return a function that will be executed only if effectCallback is executed again or the webcomponent is unmounted.

2. optionalArgumentList: Array of arguments that controls the execution of effectCallback, if an argument ofoptionalArgumentList changes it will trigger that effectCallback is executed again without first cleaning the effects subscribed by the previous execution.

Example

useLayoutEffect

useLayoutEffect replicates the logic of useEffect but with synchronous execution after rendering.

useInsertionEffect

useLayoutEffect replicates the logic of useEffect but with synchronous execution before rendering.

Syntax

Where :

1. memoValue : Return memorized by useMemo.

2. callback: Function that is executed one or more times according to optionalArgumentList.

3. optionalArgumentList: Array of arguments that controls the execution of callback, if an argument of optionalArgumentList changes it will trigger that callback is executed again.

useCallback

Hook that allows you to memorize a callback so that it keeps its scope

Where:

1. memoCallback : Return memorized by useCallback.

useId is a Atomico Hook for generating unique IDs that can be passed to accessibility attributes.

Syntax

Example

Use ID generate a unique ID for each component, this id can be useful for referencing CSS selectors or creating names for inputs that only the component knows about.

The purpose of this hook is to facilitate the consumption of promises.

Syntax

where:

• callback : asynchronous function.

• args: arguments that callback requires.

• autorun: by default true, it automatically executes the promise, if it is false the execution of the promise is suspended.

• promise : return object, at the type level it defines the following properties:

  • pending: boolean, defines if the promise is executed but pending resolution.

  • fulfilled: boolean, defines if the promise has been fulfilled

  • result: result of the promise.

  • rejected: boolean, defines if the promise has been rejected.

Example

This hook enables you to take control of the context from the component that instantiates useProvider, thus avoiding the need to instantiate the context node in the DOM.

Example of the useProvider hook:

Objective

Avoid creating an instantiable context node in the DOM.

It is normal that the state of your component depends on the references of a slot, this hook facilitates the process of observing these references without the need to associate the changes to a state.

Syntax

Where:

1. update: Callback, force component update.

With the new contexts API you will be able to easily communicate components without the need to handle events, by default the communication is top down, but through it you can share anything as long as it is defined as an object.

Atomico's api is similar to React's Context api, let's explore the behavior of Atomico's context api:

createContext

create a custom Element as a context, this will serve to synchronize all the components nested within it, you must always remember to declare the tagname of this customElement, example

useContext

It allows to consume the return of createContext, let's go back to the previous example and suppose that we want to consume the customElement Theme created by createContext, the code for this would be the following:

In this way useContext captures the value of the parent component or reuses the value given by default to createContext.

Custom context values

By setting the value prop on the context, you can pass custom values down the sub-tree:

When to use the Context API?

It is ideal to always prioritize a conversation between parent and child through events or props api, but sometimes the depth of the DOM makes this process difficult, for this the context api has been introduced. To remove DOM depth limitations and ensure synchronization based on a unique identifier, some ideal cases to solve with the context api are:

1. Synchronize states or private methods between components.

2. Share a value or states inherited from the parent regardless of DOM depth.

Syntax

Where:

• dispatchEvent: callback, dispatches the event from the webcomponent and allows defining the detail by receiving a first parameter

• myEvent: string, name of the event to dispatch.

• eventInit: optional object, event configuration.

Examples

Event customization

The second parameter of useEvent allows customizing the behavior of the even:

Recommended articles

The idea is to create an instance of AbortController every time the hook's parameters change. Each parameter change will abort the previously generated controller, thus cancelling any subscribed promises.

Example

The significant advantage of using useAbortController is the automatic cancellation of asynchronous processes that depend on it when modifying the arguments provided to useAbortController (similar to useEffect).

useAsync

with a similar approach to React's use hook, but with scope approach.

scope approach? yes, this hook seeks to resolve a promise from a callback return, this allows you to regenerate the promise according to the scope, example:

import { useAsync } from "atomico";

const getUser = (userId) => fetch(`users/${userId}`).then((res) => res.json());

function component({ userId }) {
  const user = useAsync(getUser, [userId]);
  return (
    <host>
      <h1>name: {user.name}</h1>
    </host>
  );
}

component.props = { userId: Number }

import { Props, useAsync } from "atomico";

const getUser = (userId: number): Promise<{ name: string }> =>
  fetch(`users/${userId}`).then((res) => res.json());

function component({ userId }: Props<typeof component>) {
  const user = useAsync(getUser, [userId]);
  return (
    <host>
      <h1>name: {user.name}</h1>
    </host>
  );
}

component.props = { userId: Number };

where:

• getUser: async callback.

• [ userId ]: arguments that if changed regenerate the promise.

• user : promise return

Like useEffect, the promise will be executed every time the arguments to the second parameter of useAsync change.

useSuspense

allows to listen to all useAsync executions nested in the component, example:

function component() {
  const status = useSuspense();
  return (
    <host shadowDom>
      {status.pending ? "Loading..." : status.fulfilled ? "Done!" : "Error!"}~
      <slot />
    </host>
  );
}

Syntax

const ref = useRef(optionalCurrent);

Example

import { useRef, useEffect, useState } from "atomico";

function component() {
  const ref = useRef();
  const [message, setMessage] = useState();
  useEffect(() => {
    const { current } = ref;
    current.addEventListener("input", () => {
      if (current.validity.typeMismatch) {
        setMessage("Invalid!");
      }
      current.setCustomValidity("");
    });
  }, []);
  return (
    <host>
      <input type="email" ref={ref} />
      {message && <h1>{message}</h1>}
    </host>
  );
}

Observation

The reference object is useful for referencing nodes between customHooks.