use-form
Communicate the component with external forms.
import {
useForm,
useFormListener,
useFormInputHidden,
useFormInputRadio
} from "@atomico/hooks/use-form";
If the webcomponent is nested within a form tag, this hook will return that form tag as a reference.
const ref = useForm()
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);
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");
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
Last modified 1yr ago