5.10.0

View changelog with demos on Mantine website

Theme based default props

Default props on MantineProvider
can now subscribe to theme:

import { MantineProvider, Button } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        components: {
          Button: {
            defaultProps: (theme) => ({
              color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
            }),
          },
        },
      }}
    >
      <Button>Demo button</Button>
    </MantineProvider>
  );
}

@mantine/form validators

@mantine/form package now exports isNotEmpty, isEmail, matches, isInRange and hasLength functions
to simplify validation of common fields types:

import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@mantine/core';

function Demo() {
  const form = useForm({
    initialValues: {
      name: '',
      job: '',
      email: '',
      favoriteColor: '',
      age: 18,
    },

    validate: {
      name: hasLength({ min: 2, max: 10 }, 'Name must be 2-22 characters long'),
      job: isNotEmpty('Enter your current job'),
      email: isEmail('Invalid email'),
      favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
      age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
    },
  });

  return (
    <Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
      <TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
      <TextInput
        label="Your job"
        placeholder="Your job"
        withAsterisk
        mt="md"
        {...form.getInputProps('job')}
      />
      <TextInput
        label="Your email"
        placeholder="Your email"
        withAsterisk
        mt="md"
        {...form.getInputProps('email')}
      />
      <TextInput
        label="Your favorite color"
        placeholder="Your favorite color"
        withAsterisk
        mt="md"
        {...form.getInputProps('favoriteColor')}
      />
      <NumberInput
        label="Your age"
        placeholder="Your age"
        withAsterisk
        mt="md"
        {...form.getInputProps('age')}
      />

      <Group position="right" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </Box>
  );
}

Flagpack extension

New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack.
The package is tree shakable – all unused components are not included in the production bundle.
All flag components support style props.

Other changes

• ColorPicker component now supports onColorSwatchClick prop
• ColorInput now supports closeOnColorSwatchClick prop
• ColorInput now shows eye dropper in all supported browsers by default
• @mantine/form now exports TransformedValues type to get type of transformed values from the form object
• RingProgress now supports changing root segment color with rootColor prop
• Text component now supports truncate prop
• Stepper component now supports allowSelectNextSteps prop
• @mantine/form now exports superstructResolver to allow schema based validation with superstruct
• FileInput and FileButton components now support capture prop

New Contributors

• @sctape made their first contribution in #3098
• @paulm17 made their first contribution in #3151
• @ahmedDev20 made their first contribution in #3202
• @dmshvetsov made their first contribution in #2957

Full Changelog: 5.9.6...5.10.0