use-form.md

description
Communicate the component with external forms.

use-form

Module

import { 
    useForm, 
    useFormListener, 
    useFormInputHidden, 
    useFormInputRadio 
} from "@atomico/hooks/use-form";

useForm syntax

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

const ref = useForm()

useFormListener syntax

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

useFormListener("reset",handler);

useFormInputHidden syntax

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

useFormInputHidden("my-field","my-value");

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:

myComponent.props = { name: String, checked: Boolean }

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

const refInput = useFormInputRadio(<input slot="input" value="my-value"/>);

return <host>
    <slot name="input"/>
</host>;

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

Example

{% embed url="https://webcomponents.dev/edit/collection/n2tZyzx4LMKqk1jNE0e9/NuVzTC7iXlKSxhl112pJ/src/index.jsx" %}