https://github.com/eureka-shoulders/formix

A Formik inspired form library that uses MobX under the hood
https://github.com/eureka-shoulders/formix

form mobx react

Last synced: 2 months ago
JSON representation

A Formik inspired form library that uses MobX under the hood

• Host: GitHub
• URL: https://github.com/eureka-shoulders/formix
• Owner: Eureka-Shoulders
• License: mit
• Created: 2021-11-30T12:16:31.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-06T20:38:23.000Z (about 2 years ago)
• Last Synced: 2023-09-23T19:03:15.917Z (over 1 year ago)
• Topics: form, mobx, react
• Language: TypeScript
• Homepage:
• Size: 400 KB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Formix

![npm](https://img.shields.io/npm/v/@euk-labs/formix)

![NPM](https://img.shields.io/npm/l/@euk-labs/formix)

![GitHub Workflow Status](https://img.shields.io/github/workflow/status/Eureka-Shoulders/formix/CI)

![npm](https://img.shields.io/npm/dw/@euk-labs/formix)

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

## Installation

Using npm:

```bash

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

```

Using yarn:

```bash

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

```

## Example

### Creating your first input

```tsx

import { useField } from '@euk-labs/formix';

import { observer } from 'mobx-react-lite'

import { InputHTMLAttributes } from 'react';

function TextField(

  props: InputHTMLAttributes & { name: string }

) {

  const { name, ...rest } = props;

  const { field } = useField(name);

  return ;

}

export default observer(TextField)

```

### Creating your first form

```tsx

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 (

    

      

      

      

      

      Submit

    

  );

}

```