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