JSPM

Features

• TypeScript - Written in TypeScript with full type support.
• Reactivity - Reactivity without abstractions due to Preact Signals.
• Validation - Built-in validation support, including adapters for validation schema libraries.
• React - React bindings for easy integration with React.

Install

npm install @formsignals/form-react

If you have not installed signals, you will need to install it as well:

npm install @preact/signals-react

If you are having trouble installing the Preact Signals, please consult their documentation.

Quickstart

Create a new form instance:

const form = useForm({
  defaultValues: {
    name: '',
    email: '',
  },
});

Then create a field component and configure it:

<form.FieldProvider name="name" validate={(value) => {
  if (!value) {
    return 'Name is required';
  }
}}>
  {(field) => (
    <InputSignal signal={field.data} label="Name" />
  )}
</form.FieldProvider>

Note that the InputSignal component takes a signal prop, which is the signal from the field. Internally, the component then subscribes to the changes. Due to limitations of signals, it is not possible to directly subscribe to the signal within the child arrow function.

You can also access the field context from children of the FieldProvider:

const field = useFieldContext();