Enabling YUP Object Schema Validator

yup is not included in the package, so you have to install it manually.

First of all install yup to enable the YUP plugin.

npm install --save yup

Define the YUP schema

Define a YUP schema using a function which takes in input the YUP instance and returns the schema:

const $schema = (y) =>
  y.object().shape({
    club: y.string().required(),
    members: y.array().of(y.object().shape({
      firstname: y.string().required(),
      lastname: y.string().required(),
    })),
  });

Define a plugins object

Pass the YUP package and the previously defined schema to the YUP plugin.

import yup from 'mobx-react-form/lib/validators/YUP';
import $pkg from 'yup';

const plugins = {
  yup: yup({
    package: $pkg,
    schema: $schema,
    extend: ({ validator, form }) => {
      ... // access yup validator and form instances
    },
  })
};

Create the form passing the plugins object

new Form({ ... }, { plugins });

Note: YUP does not support the extend callback or async validation pipelines through mobx-react-form's plugin system. For custom rules and async validation, use YUP's native .test() method on the schema directly.