@altiore/form

Altiore Form

@altiore/form

powerful forms with @altiore/form

русская версия README.RU.md

Why?

To simplify work with forms. If you are tired of the terribly slow forms of React

Installation:

npm

npm i @altiore/form -S

yarn

yarn add @altiore/form

Simplest usage

import React, {useCallback} from 'react';

import {Form} from '@altiore/form';

const MyForm = () => {
  const handleSubmit = useCallback((values) => {
    console.log('form.values is', values);
  }, []);

  return (
    <Form onSubmit={handleSubmit}>
      <input name="name" />
      <button type="submit">Submit</button>
    </Form>
  );
};

Custom field

Allows you to customize the appearance of the input adds validation functionality and several other useful features. Custom Field in details You could use FieldArray for arrays

import React, {useCallback} from 'react';

import {createField, Form} from '@altiore/form';

/**
 * error and name here added by createField halper
 */
const FieldView = ({error, name, label}) => {
  return (
    <div>
      <label htmlFor="input-id">
        {label}
        <input id="input-id" name={name} />
      </label>
      <span>{error}</span>
    </div>
  );
};

export const Field = createField(FieldView);

const MyForm = () => {
  const handleSubmit = useCallback((values) => {
    console.log('form.values is', values);
  }, []);

  return (
    <Form onSubmit={handleSubmit}>
      <Field
        label="Field Label"
        name="name"
        validators={
          [
            /* you can add validators here */
          ]
        }
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

Validation

Validation detailed example