add hook useChannel

useChannel

Utility similar to the context of Svelte, useChannel allows the synchronization of values from one component superior to another.

import

import { useChannel } from "@atomico/hooks/use-channel";

Syntax

const [rootValue, setValueChildren] = useChannel<AnyType>(eventName:string);

Where:

1. rootValue: value defined by a superior component.
2. setValueChildren: Defines a value to inherit for nested components.
3. AnyType : Allows you to associate a type for rootValue and the argument for setValueChildren.
4. eventName: Event to dispatch for synchronization.

Add the hook useMutationObserver

useMutationObserver

import

import { useMutationObserver, useMutationObserverState } from "@atomico/hooks/use-mutation-observer";

Syntax

useMutationObserver

Execute a callback before each update issued by MutationObserver.

const ref = useRef();
useMutationObserver(ref, callback:MutationCallback, config: MutationObserverInit); 

useMutationObserverState

Associates the MutationCallback argument with the local state.

const ref = useRef();
const mutationRecords:MutationRecord[] = useMutationObserverState(ref, config: MutationObserverInit); 

3.1.1

fix useForceUpdate

add usePromise

Consumes a promise reflecting the return and status of this

use-promise

Installation

npm install @atomico/hooks

Module

import { usePromise } from "@atomico/hooks/use-promise";

Syntax

const [result, status] = usePromise(
  asyncFunction,
  runFunction,
  optionalArguments
);

Where :

• result: Return of the promise
• status: Promise status:
  • " ": Not executed.
  • " pending ": In execution.
  • " fulfilled ": Executed without error
  • " rejected ": Executed with error
• asyncFunction: asynchronous function.
• runFunction: boolean, if it is true it will execute the promise and define the status.
• optionalArguments: Optionalany [], allows to regenerate the promise through arguments.

name change

Now this package is called @atomico/hooks, to maintain a coherence with the objective of this

2.7.1

The order of the sizes was not correct, now the sizes are ordered first by width and then by height

2.7.0

useResizeObserver

This hook allows observing a reference using ResizeObserve

Example

import { useRef } from "atomico";
import { useResizeObserver } from "@atomico/kit/use-resize-observer";

function component() {
  const ref = useRef();
  useResizeObserver(ref, (rect) => console.log(rect));
  return (
    <host shadowDom>
      <div ref={ref}>
        <slot />
      </div>
    </host>
  );
}

Hooks

useResizeObserver

useResizeObserver(ref, (rect) => {
  console.log(rect);
});

useResizeObserverState

const rect = useResizeObserverState(ref);

Add new hook use-responsive-state

Add new hook use-responsive-state

This new hook allows you to define states based on a serialized media query, according to the resolution of the browser, a state will be defined to be used in the logic.

Example

import { useResponsiveState } from "@atomico/kit/use-responsive-state";

function component() {
  const state = useResponsiveState("default, hd 1080px, fullhd 1980px");
  return (
    <host>
      {state == "fullhd" ? (
        <h1>fullhd resolution</h1>
      ) : state == "hd" ? (
        <h1>high resolution</h1>
      ) : (
        <h1> default resolution </h1>
      )}
    </host>
  );
}

exposes the getPath function of use-router

exposes the getPath function of use-router

Example

import { getPath } from "@atomico/kit/use-router";

add useAsyncEffect

keep the syntax of useEffect but the resolution is asynchronous

Syntax

useAsyncEffect(async () => {
  await anyPromise();
  return () => console.log("clean effect");
}, optionalArguments);