form-full v0.3.1

Installation

Form-Full is available as an npm package.

// with npm
npm install form-full

// with yarn
yarn add form-full

How It Works

First, it is important to understand how each part interacts with the other.

There are four main parts which are as follows:

FormFull documentation React component that must encompass the entire form that will manage

useFormFull.field documentation Hook that will connect a new value input component (TextField, RadioButton, Checkbox... and everything else your project needs to use in the form)

useFormFull.button documentation Hook that will connect a new action component (Buttons and components that use onClick and need to interact with the form)

Handler Methods documentation // In process of development Class that manages all form behavior (Accessible by saving with the formRef of the FormFull component or in calls like onChange and onBlur of the input or field validations (validation or asyncValidation).

You can preview using the form and how to create form-full components in this interactive demo:

Usage

import React from "react";
import { sleep } from "./utils";
import { FormFull } from "form-full";
import "./styles.css";
import Input from "./fields/Input";
import Button from "./buttons/Button";

export default function App() {
  const [currentValues, setCurrentValues] = React.useState({});
  const [savedValues, setSavedValues] = React.useState();
  const [disabledForm, setDisabledForm] = React.useState(false);

  function simulateRequest() {
    setCurrentValues(null);
    sleep(2000).then(() => {
      setCurrentValues({
        name: "Form Full",
        age: "18",
      });
    });
  }

  return (
    <div className='App'>
      <div className='form-container'>
        <FormFull
          disabled={disabledForm}
          currentValues={currentValues}
          onSubmit={(data) => {
            setSavedValues(data);
          }}>
          <div className='inputs-container'>
            <Input name='name' label='Your name' required='Required field' />
            <Input name='age' label='Your age' />
            <Input
              name='defaultValue'
              label='Default Value'
              defaultValue='Some Value'
            />
          </div>
          <Button action='submit' feedback>
            Submit
          </Button>
          <Button action='clear'>Clear All Values</Button>
          <Button action='clearDefault'>Set All Values to Default</Button>
          <Button onClick={() => simulateRequest()}>
            Simulate data from API
          </Button>
          <Button onClick={() => setDisabledForm(!disabledForm)}>
            {disabledForm ? "Enable Form" : "Disable Form"}
          </Button>
        </FormFull>
      </div>

      <div>
        <h3>
          {!!savedValues
            ? "Values ​​that were saved when sending the data."
            : "Submit the values ​​correctly to view the data that was sent."}
        </h3>
        {!!savedValues && <p>{JSON.stringify(savedValues)}</p>}
      </div>
    </div>
  );
}

First of all it will be necessary to create components that connect with form-full

Example of an "Input" component

import React from "react";
import { useFormFull } from "form-full";

function getErrorClassname(base, error, valid) {
  const className = base;
  if (error) return `${className} invalid`;
  if (valid) return `${className} valid`;
  return className;
}

function getHint(error, valid) {
  if (error) return error;
  if (valid) return "Valid value.";
  return null;
}

function Input(props) {
  const {
    value,
    error,
    valid,
    onSubmit,
    onBlur,
    onChange,
    testFieldError,
    ref,
    formDisabled,
    formLoading,
    // ffHandler, If some extra treatment is needed
  } = useFormFull.field(props);

  const { label, required, name } = props;

  return (
    <div className={getErrorClassname("form-control", error, valid)}>
      <label for={name} className='form-input-label'>
        {label} {!!required ? "*" : ""}
      </label>
      <input
        name={name}
        label={label}
        value={value}
        ref={ref}
        required={!!required}
        disabled={formDisabled || formLoading}
        onKeyPress={onSubmit}
        onChange={(event) => {
          onChange(event, event.target.value);
          if (props.validateOnChange) {
            testFieldError();
          }
        }}
        onBlur={onBlur}
        className='form-input'
      />
      <span className='form-input-hint'>{getHint(error, valid)}</span>
    </div>
  );
}

export default React.memo(Input);

Example of an "Button" component

import { useFormFull } from "form-full";

function Button({
  children,
  action,
  feedback,
  onClick: onClickProps,
  ...props
}) {
  const { onClick, formLoading, formDisabled } = useFormFull.button({
    feedback,
    action,
    onClick: onClickProps,
  });

  return (
    <button
      {...props}
      className='button'
      disabled={formDisabled}
      onClick={formLoading ? null : onClick}>
      {formLoading ? "Loading..." : children}
    </button>
  );
}

export default React.memo(Button);

Documentation

FormFull

props passed to the component that manages the form:

Use FormFull Field

useFormFull.field Hook used to connect a field component to be controlled by form-full

Receives an object as a parameter with the properties:

Returns an object with properties:

Use FormFull Button

useFormFull.button Hook used to connect a button component to be controlled by form-full

Receives an object as a parameter with the properties:

Returns an object with properties:

Handler Methods