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
Using yarn:
yarn add @euk-labs/formix mobx
Example
Creating your first input
import { useField } from '@euk-labs/formix';
import { InputHTMLAttributes } from 'react';
function TextField(
props: InputHTMLAttributes<HTMLInputElement> & { name: string }
) {
const { name, ...rest } = props;
const { field } = useField(name);
return <input {...rest} {...field} />;
}
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>
);
}
11 Jul 10, 2022
8 Oct 13, 2022
4 Feb 14, 2023
1.1k Dec 24, 2022
95 Aug 30, 2022
1k Nov 21, 2022
135 Nov 6, 2022
26 Apr 29, 2022
9 Feb 27, 2022
74 Dec 12, 2022
3 Oct 24, 2022
173 Dec 17, 2022
32 Jan 3, 2023
47 Dec 7, 2022
6 Oct 16, 2022
3 Feb 10, 2023
266 Jan 3, 2023
23 Aug 10, 2022
57 Dec 18, 2022
38 Nov 11, 2022
1.4k Dec 19, 2022
475 Oct 30, 2022
145 Nov 11, 2022
3.2k Dec 17, 2022
14 Mar 25, 2021
0 Jan 4, 2022
5 Sep 19, 2022
9.4k Oct 12, 2021