redux-form-yup
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    redux-form-yup

    npm version

    What is this?

    This is an async validation function that takes in a yup schema and validates your redux-form form and automatically maps back errors to the proper structure.

    Setup

    npm install redux-form-yup

    Create your yup schema

    The structure of your schema should exactly match the structure of values return from your form. Yup will allow you to create complex object schemas as well as work with validating arrays.

    const schema = yup
        .object()
        .shape({ 
            firstName: yup.string().required(), 
            lastName: yup.string().required(),
            email: yup.string().email().required(),
            address: yup.object().shape({
                street: yup.string.required(),
                city: yup.string.required(),
                state: yup.string.required().min(2).max(2),
                zip: yup.number(),
            })
        });

    So the above would look maybe something like:

        <Field name="firstName" component={customRender} type="text" />
        <Field name="lastName" component={customRender} type="text" />
        <Field name="email" component={customRender} type="text" />
        <FormSection name="address">
            <Field name="street" component={customRender} type="text" />
            <Field name="city" component={customRender} type="text" />
            <Field name="state" component={customRender} type="text" />
            <Field name="zip" component={customRender} type="text" />
        </FormSection>
    Import asyncValidate and shouldAsyncValidate from redux-form-yup

    shouldAsyncValidate will help the enforce the yup schema to always run. In the future there will be some additional options.

    import {asyncValidate, shouldAsyncValidate} from "redux-form-yup"

    Add both as options to your HoC
    export default reduxForm({
        form: "contact",
        asyncValidate: asyncValidate(schema),
        shouldAsyncValidate,
    })(ContactForm);

    TypeScript

    redux-form-yup was made with TypeScript and as such its own types are bundled. You will need your own types for yup and redux-form. You can get these from @types/redux-form and (soon) @types/yup.

    Async/Await & Promises

    redux-form asyncValidate is promise driven as such redux-form-yup requires Promise to be available. For older browsers I suggest using es6-promise global installer require('es6-promise/auto');.

    Install

    npm i redux-form-yup

    DownloadsWeekly Downloads

    1,094

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    146 kB

    Total Files

    12

    Last publish

    Collaborators

    • patwritescode