@altiore/form

Altiore Form

@altiore/form

Productive, flexible and extensible forms with easy-to-use validation and the most user-friendly API @altiore/form

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

Why?

To simplify and speed up work with forms. If you are tired of the terribly slow forms of React and tired to write the same things again and again

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