0.1.7 • Published 3 years ago
@10xjs/form v0.1.7
@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>
);
Typescript useForm
Hook Example
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>
);
);
0.0.0-4e2cfe0f1
3 years ago
0.0.0-4634fe5ec
3 years ago
0.0.0-d287186ea
3 years ago
0.0.0-0a1a4bd01
3 years ago
0.0.0-ecf203919
3 years ago
0.0.0-100d7800c
3 years ago
0.0.0-0d76ae978
3 years ago
0.0.0-1539f7456
3 years ago
0.0.0-cde004cdc
3 years ago
0.0.0-9eed5a646
3 years ago
0.0.0-78f45486d
5 years ago
0.0.0-abfec2541
5 years ago
0.0.0-04c9ac8c5
5 years ago
0.0.0-8cca69df6
5 years ago
0.0.0-7061e9746
5 years ago
0.0.0-97fed947e
5 years ago
0.0.0-7dad34982
5 years ago
0.0.0-4dee0fc11
5 years ago
0.0.0-c083cf9f9
5 years ago
0.0.0-4e51a50b6
5 years ago
0.0.0-2f1f2707d
5 years ago
0.0.0-ab158e4e1
5 years ago
0.0.0-9b1a66494
5 years ago
0.0.0-2f61feb6b
5 years ago
0.0.0-a74c1bc29
5 years ago
0.0.0-6700104d7
5 years ago
0.0.0-14d61b8a4
5 years ago
0.0.0-b5f117330
5 years ago
0.0.0-b3a38c0c4
5 years ago
0.0.0-5d65c7914
5 years ago
0.0.0-2b8f2e087
5 years ago
0.0.0-b6ffd8410
5 years ago
0.0.0-c3ebc5726
5 years ago
0.0.0-77678c287
5 years ago
0.0.0-01f314d71
5 years ago
0.0.0-9c22b7df7
5 years ago
0.0.0
5 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago