Have ideas to improve npm?Join in the discussion! »

    @kyump/final-form-generator-mui

    1.1.2 • Public • Published

    Final Form Generator MUI

    Final Form Generator MUI is an implementation of @kyump/final-form-generator with Material UI v4.

    Installation

    You need some dependencies in order to use this package:

    Usage

    Here a small example

    API

    MuiForm

    The main component of the package.

    • fields - $ReadOnlyArray<FieldType> (required) : Fields of the forms
    • onSubmit - (values: Object) => any (required) : Submit callback of the form
    • initialValues - Object : Initial values of the form
    • columns - number : columns number of the form grid
    • rows - number : rows number of the form grid
    • renderSubmit - (params: RenderSubmitParamsType) => React$Element : custom render for submit button
    • preValidate - (values: Object) => {[string]: string} : Function than can be called before yup validation
    • devMode - boolean: true to display erros and values of the form
    • children - React$Element: Children of the form
    • customValidationSchema - Object: Yup base schema is you want to use noSortEdges for example.
    const customValidationSchema = Yup.object().shape({
        customer: Yup.object().shape({}, ['phone', 'email']),
    });

    Here, if you put validation on field customer.email or customer.phone it will be add to this shape.

    • preValidate - (values: Object) => Object: Function than can be called before yup validation. It has the form values as param and should return an object with error message ({[string]: string})

    useMuiFormGenerator

    This hook is used to extends MuiForm in association with FormComponent.

    • customDefaultValidation - (name: string) => ?Object (required): Function used to extend or override the validation
    • fields - $ReadOnlyArray (required): The fields of the form
    • customValidationSchema : cf MuiForm
    • preValidate : cf MuiForm
    • customRenderInput - (params: { field: T, children?: Array<React$Node>, index: number, }) => ?React$Node : Function used to extend or override MUI renderInput

    FormComponent

    This component is used to extends MuiForm in association with FormComponent.

    Fields

    MuiForm have inputs already implemented.

    License

    MIT

    Install

    npm i @kyump/final-form-generator-mui

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar