@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
}