use-form
Communicate the component with external forms.

Module

1
import {
2
useForm,
3
useFormListener,
4
useFormInputHidden,
5
useFormInputRadio
6
} from "@atomico/hooks/use-form";
Copied!

useForm syntax

If the webcomponent is nested within a form tag, this hook will return that form tag as a reference.
1
const ref = useForm()
Copied!

useFormListener syntax

If the webcomponent is nested within a form tag, you will be able to listen to events from that tag through useFormListener.
1
useFormListener("reset",handler);
Copied!

useFormInputHidden syntax

el hook renderiza un input hidden en el lightDOM cuyo name y value del input seran los parametros que el hook resiva
1
useFormInputHidden("my-field","my-value");
Copied!

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:
1
myComponent.props = { name: String, checked: Boolean }
Copied!
You can work with the input from the component logic, example:
1
const refInput = useFormInputRadio(<input slot="input" value="my-value"/>);
2
3
return <host>
4
<slot name="input"/>
5
</host>;
Copied!
Your component will automatically be reactive to the change of the states of the radio input

Example

WebComponents.dev
WebComponents.dev