mantine-form-superstruct-resolver

superstruct resolver for @mantine/form.

Installation

With yarn:

1yarn add superstruct mantine-form-superstruct-resolver

With npm:

1npm install superstruct mantine-form-superstruct-resolver

Basic fields validation

1import * as s from 'superstruct';
2import isEmail from 'is-email';
3import { superstructResolver } from 'mantine-form-superstruct-resolver';
4
5const emailString = s.define('email', isEmail);
6
7const schema = s.object({
8  name: s.size(s.string(), 2, 30),
9  email: emailString,
10  age: s.min(s.number(), 18),
11});
12
13const form = useForm({
14  initialValues: {
15    name: '',
16    email: '',
17    age: 16,
18  },
19  validate: superstructResolver(schema),
20});
21
22form.validate();
23form.errors;
24// -> {
25//   name: 'name: Expected a string with a length between `2` and `30` but received one with a length of `0`',
26//   email: 'email: Expected a value of type `email`, but received: `""`',
27//   age: 'age: Expected a number greater than or equal to 18 but received `16`',
28// }

Nested fields validation

1import * as s from 'superstruct';
2import { useForm } from '@mantine/form';
3import { superstructResolver } from 'mantine-form-superstruct-resolver';
4
5const nestedSchema = s.object({
6  nested: s.object({
7    field: s.size(s.string(), 2, 30),
8  }),
9});
10
11const form = useForm({
12  initialValues: {
13    nested: {
14      field: '',
15    },
16  },
17  validate: superstructResolver(nestedSchema),
18});
19
20form.validate();
21form.errors;
22// -> {
23//  'nested.field': 'nested field: Expected a string with a length between `2` and `30` but received one with a length of `0`',
24// }

List fields validation

1import * as s from 'superstruct';
2import { useForm } from '@mantine/form';
3import { superstructResolver } from 'mantine-form-superstruct-resolver';
4
5const listSchema = s.object({
6  list: s.array(
7    s.object({
8      name: s.size(s.string(), 2, 30),
9    })
10  ),
11});
12
13const form = useForm({
14  initialValues: {
15    list: [{ name: '' }],
16  },
17  validate: superstructResolver(listSchema),
18});
19
20form.validate();
21form.errors;
22// -> {
23//  'list 0 name: Expected a string with a length between `2` and `30` but received one with a length of `0`',
24// }

License

MIT