Eureka-Shoulders/formix

A Formik inspired form library that uses MobX under the hood

Formix

A Formik inspired form library that uses MobX under the hood and update only the changed fields.

Installation

Using npm:

npm install @euk-labs/formix mobx mobx-react-lite

Using yarn:

yarn add @euk-labs/formix mobx mobx-react-lite

Example

Creating your first input

import { useField } from '@euk-labs/formix';
import { observer } from 'mobx-react-lite'
import { InputHTMLAttributes } from 'react';

function TextField(
  props: InputHTMLAttributes<HTMLInputElement> & { name: string }
) {
  const { name, ...rest } = props;
  const { field } = useField(name);

  return <input {...rest} {...field} />;
}

export default observer(TextField)

Creating your first form

import { Formix } from '@euk-labs/formix';
import { TextField } from './TextField';

const initialValues = {
  firstName: '',
  lastName: '',
  email: '',
  password: '',
};

function handleSubmit(values) {
  console.log(values);
}

function Form() {
  return (
    <Formix initialValues={initialValues} onSubmit={handleSubmit}>
      <TextField name="firstName" placeholder="First Name" />
      <TextField name="lastName" placeholder="Last Name" />
      <TextField name="email" placeholder="E-mail" />
      <TextField name="password" placeholder="Password" />

      <button type="submit">Submit</button>
    </Formix>
  );
}