effector-final-form

☄️ Effector bindings for Final Form 🏁

Demo

Forms values and validation rules are part of the business logic. This means that you need to be able to work with them without being bound to the UI-framework.

The goal of this project is to combine Final Form and Effector to achieve the above.

Installation

yarn add effector-final-form
# or
npm add effector-final-form
# or
pnpm add effector-final-form

Usage

Just import from the root module:

import { createForm } from 'effector-final-form';

Base example

import { createForm } from 'effector-final-form';

const form = createForm<{ login: string; password: string }>({
  onSubmit: console.log,
  subscribeOn: ['submitSucceeded', 'submitting'],
});

const loginField = form.api.registerField({
  name: 'login',
  subscribeOn: ['value', 'error', 'validating'],
  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect login'),
});

loginField.$.watch(console.log);
// {name: "login", value: null, error: null, validating: true}
// {name: "login", error: "Incorrect login", value: null, validating: false}

const passwordField = form.api.registerField({
  name: 'password',
  subscribeOn: ['value', 'error', 'validating'],
  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect password'),
});

passwordField.$.watch(console.log);
// {name: "password", value: null, error: null, validating: true}
// {name: "password", error: "Incorrect password", value: null, validating: false}

loginField.api.changeFx('John');
// {name: "login", error: null, value: "John", validating: true}
// {name: "login", error: null, value: "John", validating: false}
passwordField.api.changeFx('secret');
// {name: "password", error: null, value: "secret", validating: true}
// {name: "password", error: null, value: "secret", validating: false}
form.api.submitFx();
// {login: "John", password: "secret"}

Try it

API

Documentation link

Differences from Final Form

Documentation link

Limitations

Documentation link

More examples

Documentation link