Package Exports

@altiore/form
@altiore/form/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@altiore/form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 fields to form gives you new advantages.

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>
    );
};