Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
series of useful hooks for creating webcomponents
Hooks | v3 | v4 |
---|---|---|
use-current-value
The useCurrentValue
hook allows associating a value with current
based on its parameter, equivalent to:
With the useCurrentValue
hook
Create reactive templates that interact with the state of your webcomponent
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:
Increase the value before a click in a unit.
Increase the value by more than one unit according to the click pressure time.
Communicate the component with external forms.
If the webcomponent is nested within a form tag, this hook will return that form tag as a reference.
If the webcomponent is nested within a form tag, you will be able to listen to events from that tag through useFormListener.
el hook renderiza un input hidden en el lightDOM cuyo name y value del input seran los parametros que el hook resiva
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
The usePromise hook consumes an asynchronous function is ideal for using fetch or other asynchronous tasks.
Where :
result
: Retorno de la promesa
status
: Estado de la promesa:
""
: Without executing.
"pending"
: In action.
"fulfilled"
: Successfully executed.
"rejected"
: Executed with error.
asyncFunction
: asynchronous function.
runFunction
: Booleano
, if true
it will execute the promise and define the status.
optionalArguments
: Optional any[]
, allows to regenerate the promise through arguments.
Retrieve a node higher than the current webcomponent.
Where:
selector
: String
, Selector to be used by Element.matches when searching for the parent.
parent
: Element
, ascending search result according to selector.
Where:
parents:
parent nodes of the webcomponent
composed
: bypasses shadow DOM in parent capture.
Retrieves the nodes assigned to a slot.
Declare a state based on a responsive expression similar to using the tag img[srcset].
Where:
state
: String
, Current state according to the comparison between experiment and matchMedia.
expression
: String
, An expression that declares the serialized states.
Where:
defaultState
: Default state this cannot contain the use of commas ", "
.
caseState
: Status to show if matchMedia match.
size: size expression to observe, example:
"1080px": (min-width: 1080px)
"1080x720px": (min-width: 1080px) and (min-height: 720px)
"50rem": (min-width: 50rem)
"50em": (min-width: 50em)
The following example shows the use of useResponsiveState, to display a message based on the mediaquery.
Captures all nodes not created by the webcomponent render, ideal for apply slot polyfill in LightDOM.
Where :
childNodes
: List of nodes that do not belong to the webcomponent render.
update
: Callback that forces a new childNodes
scan.
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.
Allows forcing the rendering of the webcomponent without the need to be tied to a state or property
Since the version of atomico@1.14.* there is the useUpdate hook, with the same functionality but in the core of Atomico.
Where:
forceRender
: Callback
to force rendering of the webcomponent.
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:
Share values from the scope via setter and getters
the useReflectEvent hook reflects the event from the reference origin to the reference destination
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
useRefectEvent will listen for the eventType of refFrom, to reflect it on refTo
Reflects on an element the given event