@altiore/form

Altiore Form

@altiore/form

powerful forms with @altiore/form

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

Why?

To simplify work with forms

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 form

Custom form allows adding fields of any type to vary your forms. Adding and deleting Field to form gives you new advantages. You can also use FieldArray for advanced usage.

import React, {useCallback} from 'react';

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

export const Field = createField(
  ({error, name, label /* you can add any extra fields here: */}) => {
    return (
      <div>
        <label htmlFor="input-id">
          {label}
          <input id="input-id" name={name} ref="{inputRef}" />
        </label>
        <span>{error}</span>
      </div>
    );
  },
);

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

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