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...
The useCurrentValue
hook allows associating a value with current
based on its parameter, equivalent to:
With the useCurrentValue
hook
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.
series of useful hooks for creating webcomponents
Hooks | v3 | v4 |
---|---|---|
Create reactive templates that interact with the state of your webcomponent
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
The usesClickCoordinates hook is for capturing click coordinates, this is useful when positioning a tooptip or creating visual effects
creates a bottleneck to the definition of a state, limits concurrency.
this hook is similar to useState, but the purpose of this hook is to bottleneck the state at update time
mode differences
fps:
if delay is set to 1, the update is executed for each cycle of requestAnimationFrame(60fps),
if delay is defined as 2, the update is executed for every 2 cycle of requestAnimationFrame(30fps)
timeout: the delay will be the milliseconds for setTimeout
idle : the delay will be the milliseconds for requestIdleCallback
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