1.0.6 • Published 3 years ago
@neat-tech/form v1.0.6
@neat-tech/form
Tools for writing type-safe forms in react
Installation
yarn add @neat-tech/form
Usage
Library provides useForm
hook for native and web apps.
import { Native } from '@neat-tech/form';
//or
import { Web } from '@neat-tech/form';
Quick showcase
import { Web } from '@neat-tech/form'
import * as yup from 'yup'
const schema = yup.object({
name: string().required()
})
const UsageExample = () => {
const { field, formProps, submitProps, values } = Web.useForm({
schema,
onSubmit: async values => console.log(values)
})
return (
<>
<form {...formProps}>
{/** 'name' here gets type checked */}
<input {...field('name')}>
</form>
<button {...submitProps}>Submit</button>
</>
)
}
API
useForm(config: FormConfig): UseFormResult
FormConfig
- same options as useFormik accepts, though a little bit more type-safe
UseFormResult
:
Web:
export interface UseFormResult<Values> {
submitProps: {
disabled: boolean; // whether button is disabled
loading: boolean; // whether button should display spinner
form: string; // form id - needed to tie button with form the web way
type: 'submit'; // type=submit, needed for web
};
initialValues?: Partial<Values>; // initial values
validateForm: () => Promise<boolean>; // async function to validate form
formProps: {
id: string; // form id - needed to make submit button submit form even if outside of <form> tag
onSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void; // onSubmit handler
};
values: Partial<Values>; // values
field: (
path
) => {
value: Value | undefined; // value at given path
error?: string | object; // error at given path
onChange: (v?: Value) => void; // onChange for given path
};
formik: Formik<Values>; // object that is returned by formik
}
Native:
export interface UseFormResult<Values> {
submitProps: {
disabled: boolean; // whether button is disabled
loading: boolean; // whether button should display spinner
onPress: () => void; // submit form by submit button
};
initialValues?: Partial<Values>; // initial values
validateForm: () => Promise<boolean>; // async function to validate form
formProps: {
id: string; // form id - needed to make submit button submit form even if outside of <form> tag
onSubmit: (e?: React.FormEvent<HTMLFormElement> | undefined) => void; // onSubmit handler
};
values: Partial<Values>; // values
field: (
path
) => {
value: Value | undefined; // value at given path
error?: string | object; // error at given path
onChange: (v?: Value) => void; // onChange for given path
submitForm: () => void; // submit form by input
};
formik: Formik<Values>; // object that is returned by formik
}
1.0.6
3 years ago
1.0.2
3 years ago
1.1.0-rc
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.5-rc
3 years ago
1.0.9-rc
3 years ago
1.0.8-rc
3 years ago
1.0.6-rc
3 years ago
1.0.7-rc
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
1.0.0-rc
3 years ago
0.1.6-rc
3 years ago
0.1.5-rc
3 years ago
0.1.4-rc
3 years ago
0.1.3-rc
3 years ago
0.1.2-rc
3 years ago
0.1.1-rc
3 years ago