@superdispatch/forms

[![npm](https://img.shields.io/npm/v/@superdispatch/forms)](https://www.npmjs.com/package/@superdispatch/forms) [![npm minzipped size](https://img.shields.io/bundlephobia/minzip/@superdispatch/forms.svg)](https://bundlephobia.com/result?p=@superdispatch/f

Usage no npm install needed!

<script type="module">
  import superdispatchForms from 'https://cdn.skypack.dev/@superdispatch/forms';
</script>

README

@superdispatch/forms

npm npm minzipped size

Installation

yarn add @superdispatch/forms @material-ui/core formik

Description

@superdispatch/forms is not form implementation from scratch. It enhances formik form library.

The package contains enhanced form and formil field adaptors via material-ui components.

API

useFormikEnhanced

Returns enhanced Formik.

Config
import { FormikConfig, FormikErrors, FormikValues } from 'formik';

interface FormikEnhancedConfig<TValues extends FormikValues, TResponse>
  extends Omit<FormikConfig<TValues>, 'onSubmit'> {
  /**
   * Resets form when input value changes
   */
  key?: unknown;
  /**
   * Extracts errors from the submission error
   */
  getFormErrors?: (error: unknown) => FormikErrors<TValues>;
  onSubmit: (values: TValues) => TResponse | PromiseLike<TResponse>;
  onSubmitSuccess?: (response: TResponse, values: TValues) => void;
  onSubmitFailure?: (error: Error, values: TValues) => void;
}
Usage
import { useFormikEnhanced, FormikTextField } from '@superdispatch/forms';
import { FormikProvider, Form } from 'formik';

function UpdateProfileForm() {
  const formik = useFormikEnhanced({
    initialValues: { firstName: '' },
    onSubmit: () => udateProfile(),
    onSubmitSuccess: () => alert('Profile updated successfully'),
  });

  return (
    <FormikProvider value={formik}>
      <Form>
        <FormikTextField name="firstName" />
        <button type="submit">Update</button>
      </Form>
    </FormikProvider>
  );
}

FormsProvider

Set default props for useFormikEnhanced.

Props
import { PropsWithChildren } from 'react';
import { FormikErrors } from 'formik';

type FormsProviderProps = PropsWithChildren<{
  getFormErrors?: (error: unknown) => FormikErrors<unknown>;
}>;
Usage
function displayFormErrors(error: Error) {
  return error.message;
}

function Root() {
  return (
    <FormsProvider getFormErrors={displayFormErrors}>
      <App />
    </FormsProvider>
  );
}

FormikCheckboxField

Formik field adapter for Material Checkbox.

Props
import { CheckboxFieldProps } from '@superdispatch/ui';
import { FieldValidator } from 'formik';

interface FormikCheckboxFieldProps extends CheckboxFieldProps {
  name: string;
  validate?: FieldValidator;
}
Usage
import { FormikCheckboxField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikCheckboxField
        name="agree"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}

FormikDateField

Formik field adapter for @superdispatch/dates.

Props
import { FieldValidator } from 'formik';
import { DateFieldProps } from '@superdispatch/dates';

interface FormikDateFieldProps extends Omit<DateFieldProps, 'error'> {
  name: string;
  validate?: FieldValidator;
}
Usage
import { FormikDateField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikDateField
        name="dob"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}

FormikPhoneField

Formik field adapter for @superdispatch/phones.

Props
import { PhoneFieldProps } from '@superdispatch/dates';
import { FieldValidator } from 'formik';

interface FormikPhoneFieldProps
  extends Omit<PhoneFieldProps, 'error' | 'value'> {
  name: string;
  validate?: FieldValidator;
}
Usage
import { FormikPhoneField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikPhoneField
        name="phone"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}

FormikRadioGroupField

Formik field adapter for Material Radio Group.

Props
import { FieldValidator } from 'formik';
import { RadioGroupFieldProps } from '@superdispatch/ui';

interface FormikRadioGroupFieldProps
  extends Omit<RadioGroupFieldProps, 'error' | 'value'> {
  name: string;
  validate?: FieldValidator;
}
Usage
import { RadioField } from '@superdispatch/ui';
import { FormikRadioGroupField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikRadioGroupField
        name="gender"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      >
        <RadioField label="Male" value="male" />
        <RadioField label="Female" value="female" />
      </FormikRadioGroupField>
    </Form>
  );
}

FormikTextField

Formik field adapter for Material TextField.

Props
import { StandardTextFieldProps } from '@material-ui/core';
import { FieldValidator } from 'formik';
import { ChangeEvent, ReactNode } from 'react';

interface FormikTextFieldProps<T>
  extends Omit<StandardTextFieldProps, 'error'> {
  name: string;
  validate?: FieldValidator;
  formatError?: (error: string) => ReactNode;
  format?: (value: T) => string;
  parse?: (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => T;
}
Usage
import { FormikTextField } from '@superdispatch/forms';
import { Form } from 'formik';

function UpdateProfile() {
  return (
    <Form>
      <FormikTextField
        name="first_name"
        validate={(value) => (!value ? 'Field is required' : undefined)}
      />
    </Form>
  );
}