README
@10xjs/form
A high performance zero-config form state library for React.
Basic Example
import {Form, useField, input} from '@10xjs/form';
const Input = ({path}) => <input {...input(useField(path))} />;
const Fields = () => {
const {submit} = useForm();
return (
<form onSubmit={submit}>
<Input path="path" />
<button type="submit">Submit form</button>
</form>
);
};
const ConsumerComponent = () => (
<Form
values={{field: ''}}
onSubmit={(values) => submitHandlerFunction(values)}
>
<Fields />
</Form>
);
Typescript Example
import * as FormModule from '@10xjs/form';
type Values = {
/* ... */
};
type Result = {
/* ... */
};
const {Form, useContext, input} = FormModule as FormModule.TypedModule<
Values,
Result
>;
type FieldError = {
/* ... */
};
type FieldWarning = {
/* ... */
};
interface ErrorProps {
field: FormModule.FieldInterface<any, FieldError, FieldWarning>;
}
const Error = ({path}: {path: FormModule.Path}) => {
const {error, touched} = useField(path);
const {submitFailed} = useStatus();
if ((touched || submitFailed) && error !== null) {
return <div>{error}</div>;
}
return null;
};
const Input = ({path}: {path: FormModule.Path}) => {
const field = useField(path);
return <input {...input(field)} />;
};
const Fields = () => {
const {submit} = useContext();
return (
<form onSubmit={submit}>
<Input path="path" />
<Error path="path" />
<button type="submit">Submit form</button>
</form>
);
};
const ConsumerComponent = () => (
<Form
values={{field: ''}}
onSubmit={(values: Values): Result => submitHandlerFunction(values)}
>
<Fields />
</Form>
);
Typescript Ref Interface Example
import * as FormModule from '@10xjs/form';
type Values = {
/* ... */
};
type Result = {
/* ... */
};
const ModuleType = FormModule.TypedModule<Values, Result>;
type Interface = FormModule.FormInterfaceOf<ModuleType>;
const {Form} = FormModule as ModuleType;
const ConsumerComponent = () => (
const ref = React.useRef<Interface>();
<Form
ref={ref}
values={{field: ''}}
onSubmit={(values: Values): Result => submitHandlerFunction(values)}
>
<form onSubmit={(event) => (ref.current as Interface).submit(event)}>
...
</form>
</Form>
);
useForm
Hook Example
Typescript import * as FormModule from '@10xjs/form';
type Values = {
/* ... */
};
type Result = {
/* ... */
};
const ModuleType = FormModule.TypedModule<Values, Result>;
type Interface = FormModule.FormInterfaceOf<ModuleType>;
const {useForm, FormProvider} = FormModule as ModuleType;
const ConsumerComponent = () => (
const form = useForm({
values,
onSubmit,
});
return (
<FormProvider form={form}>
<form onSubmit={form.submit}>
...
</form>
</FormProvider>
);
);