The useCurrentValue hook allows associating a value with current based on its parameter, equivalent to:

const ref = useRef();

ref.current = value;

With the useCurrentValue hook

useCurrentValue(value)

The purpose of this hook is to allow communication between the webcomponent and the lightDOM without knowing the DOM, achieving with this hook:

1. expose the webcomponent's api to the lightDOM and react to it.

2. data binding between the state of the webcomponent and the lightDOM.

module

Syntax

Example

allows to create a setter and getter for a property of the webcomponent, this is useful for:

1. Reflect elements internal to the scope as part of the instance, example references.

2. Observe from the scope the mutations external to Atomico.

Example

Module

import { useKeyboard } from "@atomico/hooks/use-keyboard";

Syntax

useKeyboard(
    ref: Ref<Element>,
    keysCode: string[],
    callback: (event: KeyboardEvent)=>void
);

where:

1. ref, the reference to associate the event keydown and keyup.

2. keysCode: key combination to capture

3. callback: receives the last event of the key combination

Example

Module

Syntax

where:

1. ref: node reference to observe the click event.

2. handlerClick: Callback that receives the coordinates of the click event.

Coordinates

Where :

• x: MouseEvent.clientX

• y: MouseEvent.clientY

• offset.x : MouseEvent.offsetX

• offset.Y : MouseEvent.offsetY

Example

Module

useForm syntax

If the webcomponent is nested within a form tag, this hook will return that form tag as a reference.

useFormListener syntax

If the webcomponent is nested within a form tag, you will be able to listen to events from that tag through useFormListener.

useFormInputHidden syntax

el hook renderiza un input hidden en el lightDOM cuyo name y value del input seran los parametros que el hook resiva

useFormInputRadio

One of the difficult inputs to standardize when working with shadowDOM is the radio input, thanks to this hook you will be able to create and observe a radio input synchronized with the form and its webcomponent.

This hook requires the definition of the properties in its webcomponent:

You can work with the input from the component logic, example:

Your component will automatically be reactive to the change of the states of the radio input

Example

Inject tag style into shadowRoot with content given as parameter to use CSS.

Import

import { useCss } from "@atomico/hooks/use-css";

Sintaxis

useCss(cssText: string);

Example

Note

This hook was not created as a replacement for component.styles, it is rather a utility that seeks to facilitate the integration of css from a customHook, either by defining a state or another action.

This hook creates a style tag in the lightDOM of the component, in order to insert that directly affect the lightDOM, before using this hook consider:

1. The css is not isolated as if it occurs in the shadowDOM.

2. It does not support the use of ::slotted selector.

Module

Syntax

Example

Modulo

import { useRender } from "@atomico/hooks/use-render";

Syntax

useRender(() => <input type="text" />, optionalArguments);

Example

Modulo

import { useAsyncEffect } from "@atomico/hooks/use-async-effect";

Syntax

useAsyncEffect(async () => {
  await fetch("...");
});

This hook has a behavior similar to useEffect but focused on resolving the consumption of one or more references.

Example

Syntax

const attrs = useAttributes();

Where:

1. attrs: all the attributes defined on the webcomponent but that are not props, to facilitate reading this hook transforms the index to camelCase

Example

Create an IntersectionObserver instance to observe the intersection of the webcomponent or a reference.

Remember that to detect any intercept, a minimum height and width of the reference to be observed is required.

useIntersectionObserver

Syntax

const src = "https://code.jquery.com/jquery-3.6.0.min.js";
const done = ()=> console.log( $ );
const status = useScript(src, done);

where:

1. src: javascript type resource to inject into document.head

2. done: optional , callback when called at the end of the script load

3. status: script load status

Module

import { useCopy } from "@atomico/hooks/use-copy";

Syntax

const copy:()=>void = useCopy(ref);

Where:

1. ref : Node reference to copy

2. copy: Callback, executes the content copy event.

Example

The useClickPress hook will allow you to execute a callback with acceleration according to the click time, for example in the input type number we have 2 buttons by default, an up arrow and a down arrow, these allow us to modify the input value, either:

1. Increase the value before a click in a unit.

2. Increase the value by more than one unit according to the click pressure time.

Example

Live example

the useReflectEvent hook reflects the event from the reference origin to the reference destination, the captured event will be canceled

One of the possibilities of this hook is to reflect the events inside shadowDOM to lightDOM, example when using forms

module

import { 
    useReflectEvent, 
    reflectEvent  
} from "@atomico/hooks/use-reflect-event";

Syntax useReflectEvent

useRefectEvent will listen for the eventType of refFrom, to reflect it on refTo

Syntax reflectEvent

Reflects on an element the given event

Inherit the disabled status of a parent tag type fieldset, under certain rules:

1. The label must be on the lightDOM.

2. The component that uses this hook must declare the prop {disabled: Boolean}.

Import

Sintaxis

Where:

1. matches: Optional string, allows to change the search of the parent tag fieldset for another tag or selector compatible with .

Example

Module

import { useListener } from "@atomico/hooks/use-listener";

Syntax

useListener(
    ref: Ref<Element>, 
    name: string, 
    handler: (event)=>void, 
    option?: boolean | AddEventListenerOptions 
);

Example

Module

import { useDebounceState } from "@atomico/hooks/use-debounce-state";

Syntax

this hook is similar to useState, but the purpose of this hook is to bottleneck the state at update time

mode differences

1. fps:

   1. if delay is set to 1, the update is executed for each cycle of requestAnimationFrame(60fps),

   2. if delay is defined as 2, the update is executed for every 2 cycle of requestAnimationFrame(30fps)

Example

Module

Syntax

useResizeObserver

Where:

• ref: Ref, reference to observe the resizing.

• rect: Object, the return of DOMRectReadOnly.toJSON(), documentation of

useResizeObserverState

Where:

• ref: Ref, reference to observe the resizing.

• rect: Object, the return of DOMRectReadOnly.toJSON(), documentation of

Example

Module

Syntax

const expression = "phone, tablet 720px, destop 1080px";
const state = useResponsiveState(expression);

Where:

• state: String, Current state according to the comparison between experiment and matchMedia.

• expression: String, An expression that declares the serialized states.

Expressions

Where:

• defaultState: Default state this cannot contain the use of commas ", ".

• caseState: Status to show if matchMedia match.

  • size: size expression to observe, example:

Example

The following example shows the use of useResponsiveState, to display a message based on the mediaquery.

Module

Syntax

Where :

Module

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

useMutationObserver syntax

Observe mutations using a callback

useMutationObserver syntax

Reflects mutations in a state

Example

useProxySlot allows you to observe the nodes assigned to a slot and reassign them to another slot dynamically, example:

Input: Suppose we have a component that observe the slot[name="slide"] node

output: thanks to useProxySlot you will be able to modify the assignment of the list nodes without losing the nodes in the process as normally happens with useSlot, example:

Syntax and example

Now, Atomico includes a context API as part of its core. We recommend implementing it as an alternative to using useChannel.

An alternative to React's context but solely based on hooks.

Modulo

Module

import { useParent, useParentPath } from "@atomico/hooks/use-parent";

Syntax useParent

Where:

• selector: String, Selector to be used by when searching for the parent.

• parent: Element, ascending search result according to selector.

Syntax useParentPath

Where:

• parents: parent nodes of the webcomponent

• composed: bypasses shadow DOM in parent capture.

Example

Module

import { useSlot } from "@atomico/hooks/use-slot";

Syntax

const optionalFilter = (element)=> element instanceof MyCustomElement;
const childNodes = useSlot(ref, optionalFilter);

Where:

1. ref: Reference of the slot to observe.

2. childNodes: List of nodes assigned to the observed slot.

3. optionalFilter: allows to filter nodes assign to childNodes

Live example

Modulo

Syntax

Where:

Hook to handle routes based on expressions according to the library, this hook is used by ****

Module

Modulo

import { useChildNodes } from "@atomico/hooks/use-child-nodes";

Syntax

const [childNodes, update] = useChildNodes();

Where :

1. childNodes : List of nodes that do not belong to the webcomponent render.

2. update: Callback that forces a new childNodes scan.

Example

From the example we can highlight that the webcomponent will use all the children not created by the h1 type and will associate the onclick handler with them.

Modulo

import { useForceRender } from "@atomico/hooks/use-force-render";

Syntax

Where:

1. forceRender: Callback to force rendering of the webcomponent.

Example

Sometimes the rendering of the webcomponent does not depend on a state or property of this, to reflect these changes you can use useForceRender to regenerate the DOM, example: