0.45.0 • Published 1 month ago

@superdispatch/forms v0.45.0

Weekly downloads
113
License
MIT
Repository
github
Last release
1 month ago

@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>
  );
}
0.43.0

2 months ago

0.44.0

1 month ago

0.45.0

1 month ago

0.42.0

2 months ago

0.41.0

4 months ago

0.40.2

5 months ago

0.36.0

6 months ago

0.32.0

7 months ago

0.29.5

8 months ago

0.29.4

8 months ago

0.40.0

5 months ago

0.40.1

5 months ago

0.37.2

6 months ago

0.37.1

6 months ago

0.33.0

7 months ago

0.38.1

5 months ago

0.38.0

5 months ago

0.34.0

7 months ago

0.30.0

8 months ago

0.39.1

5 months ago

0.39.0

5 months ago

0.35.3

6 months ago

0.35.2

6 months ago

0.35.1

7 months ago

0.35.0

7 months ago

0.31.1

7 months ago

0.31.0

8 months ago

0.29.2

8 months ago

0.29.0

11 months ago

0.29.1

11 months ago

0.27.1

1 year ago

0.28.0

1 year ago

0.27.0

1 year ago

0.26.1

1 year ago

0.26.0

1 year ago

0.25.2

1 year ago

0.25.1

1 year ago

0.25.0

1 year ago

0.24.9

1 year ago

0.24.8

1 year ago

0.24.7

2 years ago

0.24.6

2 years ago

0.24.5

2 years ago

0.22.2

2 years ago

0.22.1

2 years ago

0.22.0

2 years ago

0.23.4

2 years ago

0.23.1

2 years ago

0.23.0

2 years ago

0.24.4

2 years ago

0.24.3

2 years ago

0.24.2

2 years ago

0.24.1

2 years ago

0.24.0

2 years ago

0.21.18

2 years ago

0.21.17

2 years ago

0.21.16

2 years ago

0.21.14

2 years ago

0.21.13

2 years ago

0.21.8

3 years ago

0.21.7

3 years ago

0.21.9

3 years ago

0.21.10

3 years ago

0.21.6

3 years ago

0.21.4

3 years ago

0.16.0-alpha.1

3 years ago

0.16.0-alpha.0

3 years ago

0.21.5-alpha.0

3 years ago

0.21.5-alpha.2

3 years ago

0.21.5-alpha.1

3 years ago

0.21.5-alpha.4

3 years ago

0.21.5-alpha.3

3 years ago

0.21.0

3 years ago

0.20.4

3 years ago

0.20.0

3 years ago

0.18.3

3 years ago

0.19.0

3 years ago

0.20.3

3 years ago

0.18.2

3 years ago

0.18.1

3 years ago

0.17.0

3 years ago

0.17.1

3 years ago

0.16.0

3 years ago

0.18.0

3 years ago

0.15.0

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.10.5

4 years ago

0.10.4

4 years ago

0.10.3

4 years ago

0.10.1

4 years ago

0.10.0

4 years ago

0.9.9

4 years ago

0.9.8

4 years ago

0.9.3

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.8.2

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.7.26

4 years ago

0.7.25

4 years ago

0.7.24

4 years ago

0.7.23

4 years ago

0.7.21

4 years ago

0.7.18

4 years ago

0.7.17

4 years ago

0.7.16

4 years ago

0.7.14

5 years ago

0.7.13

5 years ago

0.7.9

5 years ago

0.7.7

5 years ago

0.7.2

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.7

5 years ago

0.6.9

5 years ago

0.6.8

5 years ago

0.6.6

5 years ago

0.6.5

5 years ago

0.6.3

5 years ago

0.6.4

5 years ago

0.6.2

5 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.5.7

5 years ago

0.5.6

5 years ago

0.5.5

5 years ago

0.5.4

5 years ago

0.5.3

5 years ago

0.5.2

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.27

5 years ago

0.3.26

5 years ago

0.3.25

5 years ago

0.3.24

5 years ago

0.3.23

5 years ago

0.3.22

5 years ago

0.3.21

5 years ago

0.3.20

5 years ago

0.3.19

5 years ago

0.3.18

5 years ago

0.3.17

5 years ago

0.3.16

5 years ago

0.3.15

5 years ago

0.3.14

5 years ago

0.3.13

5 years ago

0.3.12

5 years ago

0.3.11

5 years ago

0.3.10

5 years ago

0.3.9

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.0

5 years ago

0.2.32

5 years ago

0.2.30

5 years ago

0.2.31

5 years ago

0.2.29

5 years ago

0.2.28

5 years ago

0.2.27

5 years ago

0.2.26

5 years ago

0.2.25

5 years ago