my-react-form-state

This is a React form state management library that works with React/Redux/React-Native.

Form libraries are complex, they don't make a separation between state and UI. You always end up building custom components on top of the library components that at the same time are on top of the HTML elements!!!. This makes it complex, hard to maintain and hard to change. Too many abstractions :(

This library was built for the sole purpose of unifying and simplifying the way we manage the state with React and/or Redux.

If you use Redux or just React or React Native, this library is for you! Yes, it is not a typo. You can use this library with one or the other, or both! It doesn't matter since it is implemented with Ducks under the hood.

It provides a simple hook API that you can initialize in a container component and pass down the form-state to your form.

Last but not least, it integrates with Yup/Joi/JsonSchema for data validation.

Documentation

Check the Documentation. The API is easy and fast to develop!

Storybook

Check Storybook for more examples.

Note

The library is fully tested using Jest and fully documented using JsDoc.

Getting Started

yarn add my-react-form-state

Peer Dependencies

They depend on how you want to use the library:

Just React

{
    "react",
    "react-dom",
}

With Redux

{
    "react",
    "react-dom",
    "redux",
    "react-redux",
}

Try It

Form UI Component Example

I used material-ui just as an example. You can use any UI library you want or just HTML.

import React, { useCallback } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const Form = ({
  formState: {
    fields: { name, familyName },
    isSubmittable,
    isSubmitted,
    isInitialized,
  },
  onFieldChange,
  onSubmit,
}) => {
  const onFieldChangeHandler = useCallback((e) => onFieldChange(e.target.id, e.target.value), [onFieldChange]);

  return (
    <form noValidate autoComplete="off">
      <div>
        <TextField
          error={name.showError}
          required
          id="name"
          label="Name"
          value={name.value}
          margin="normal"
          onChange={onFieldChangeHandler}
          disabled={isSubmitted}
        />
        <TextField
          error={familyName.showError}
          required
          id="familyName"
          label="Family Name"
          value={familyName.value}
          margin="normal"
          onChange={onFieldChangeHandler}
          disabled={isSubmitted}
        />
      </div>
      <div>
        <Button disabled={!isSubmittable || isSubmitted} onClick={onSubmit}>
          Submit
        </Button>
      </div>
    </form>
  );
};

export default Form;

Above example With React

Above example With React-Native

Example State with React-Redux

The library will initialize a my-react-form-state entry in your redux state where all the forms data will live. You can check the state at any given time using the redux tools. Any change in the redux state form will trigger an update in the useMyFormState hook.

import React from 'react';
import { useMyFormState } from 'my-react-form-state/react-redux';
import Form from '@YourFormComponent';

const MyForm = ({ onSubmit }) => {
  const [formState, { updateField, submitForm, resetForm }] = useMyFormState({
    initialState: { alias: 'guiyep' },
  });

  const onFieldChangeHandler = (field, value) => updateField({ field, value });

  const onSubmitHandler = async () => {
    const result = await submitForm();
    onSubmit(result);
  };

  return <Form formState={formState} onFieldChange={onFieldChangeHandler} onSubmit={submitForm} />;
};

export default MyForm;

Example State with only React (No Redux)

The library will keep the state internal to your component. No extra configuration needed.

import React from 'react';
import { useMyFormState } from 'my-react-form-state/react'; <-- THIS IS THE ONLY DIFFERENCE ;) -->
import Form from '@YourFormComponent';

const MyForm = ({ onSubmit }) => {
  const [formState, { updateField, submitForm, resetForm }] = useMyFormState({
    initialState: { alias: 'guiyep' },
  });

  const onFieldChangeHandler = (field, value) => updateField({ field, value });

  const onSubmitHandler = async () => {
    const result = await submitForm();
    onSubmit(result);
  };

  return (
    <Form formState={formState} onFieldChange={onFieldChangeHandler} onSubmit={onSubmitHandler} />
  );
};

export default MyForm;

Example State with only React-Native, it only changes the UI implementation :)

import React from 'react';
import { useMyFormState } from 'my-react-form-state/react'; <-- THIS IS THE ONLY DIFFERENCE ;) -->
import Form from '@YourFormComponent';

const MyForm = ({ onSubmit }) => {
  const [formState, { updateField, submitForm, resetForm }] = useMyFormState({
    initialState: { alias: 'guiyep' },
  });

  const onFieldChangeHandler = (field, value) => updateField({ field, value });

  const onSubmitHandler = async () => {
    const result = await submitForm();
    onSubmit(result);
  };

  return (
    <Form formState={formState} onFieldChange={onFieldChangeHandler} onSubmit={onSubmitHandler} />
  );npm
};

export default MyForm;

Using React Context/Provider

You can also define a context for a collection of forms that are going to work together isolating them from the rest of the app.

import React from 'react';
import { MyFormStateProvider } from 'my-react-form-state/react';

const initialStateBasic = { name: 'test 1', familyName: 'test 2', alias: 'test 2', favoriteColor: 'test 4' };
const initialStateBasic2 = { name: 'test 2', familyName: 'test 66', alias: 'test 88', favoriteColor: 'test 99' };

return (
  <>
    <MyFormStateProvider name="ContextForm1AndForm2">
      <Form onSubmit={onSubmit} initialState={initialStateBasic} /> // form 1
      <Form onSubmit={onSubmit} initialState={initialStateBasic2} /> // form 2
    </MyFormStateProvider>
    <MyFormStateProvider name="ContextForm3AndForm4">
      <Form onSubmit={onSubmit} initialState={{}} /> // form 3
      <Form onSubmit={onSubmit} initialState={{}} /> // form 4
    </MyFormStateProvider>
  </>
);

Now form 1 and 2 will live together in the same context (now you can share data between them) and 3 and 4 will also live together in the same context.

Note: if you have React Context google plugin installed now you will be able to see the sate in your chrome tool. This only apply to development mode.

With YUP form schema

import React from 'react';
import yup from 'my-react-form-state/yup';
import { useMyFormState } from 'my-react-form-state/react';
import * as YUP from 'yup';
import Form from '@YourFormComponent';

const YUPSchema = YUP.object().shape({
  alias: YUP.string().required(),
});

const MyForm = ({ onSubmit }) => {
  const [formState, { updateField, submitForm }] = useMyFormState({
    initialState: { alias: 'guiyep' },
    formSchema: yup.formSchema(YUPSchema),
  });

  const onFieldChangeHandler = (field, value) => updateField({ field, value });

  const onSubmitHandler = async () => {
    const result = await submitForm();
    onSubmit(result);
  };

  return <Form formState={formState} onFieldChange={onFieldChangeHandler} onSubmit={onSubmitHandler} />;
};

export default MyForm;

Above example With React

Above example With React-Redux

With JSON form schema (Using the latest JsonSchema draft)

import React from 'react';
import jsonSchema from 'my-react-form-state/json-schema';
import { useMyFormState } from 'my-react-form-state/react';
import Form from '@YourFormComponent';

const JSONSchema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      minLength: 1,
    },
    familyName: {
      type: 'string',
      minLength: 1,
    },
  },
  required: ['name', 'familyName'],
};

const MyForm = ({ onSubmit }) => {
  const [formState, { updateField, submitForm, resetForm }] = useMyFormState({
    initialState: { alias: 'guiyep' },
    formSchema: jsonSchema.formSchema(JSONSchema),
  });

  const onFieldChangeHandler = (field, value) => updateField({ field, value });

  const onSubmitHandler = async () => {
    const result = await submitForm();
    onSubmit(result);
  };

  return (
    <Form formState={formState} onFieldChange={onFieldChangeHandler} onSubmit={onSubmitHandler} onReset={resetForm} />
  );
};

export default MyForm;

Above example With React

Above example With React-Redux

More from me :)

• react-select-virtualized