Version 5.1.0

Source code

Release date

August 8th, 2022

Colors index reference

You can now reference colors from theme by index in all components:

Text with theme.colors.blue[3] color

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

function Demo() {
  return (
    <Stack align="flex-start">
      <Text color="blue.3">Text with theme.colors.blue[3] color</Text>
      <Button color="pink.4">Button with theme.colors.pink[4] color</Button>
    </Stack>
  );
}

use-form touched and dirty state

use-form hook now exposes fields touched and dirty state:

Touched/dirty demo

Touched: not touched

Dirty: not dirty

import { useForm } from '@mantine/form';
import { TextInput, Text } from '@mantine/core';

function Demo() {
  const form = useForm({ initialValues: { text: 'initial value' } });

  return (
    <>
      <TextInput
        {...form.getInputProps('text')}
        label="Touched/dirty demo"
        placeholder="Touched/dirty demo"
      />

      <Text size="sm" mt="sm">
        Touched:{' '}
        <Text span color={form.isTouched('text') ? 'blue' : 'red'}>
          {form.isTouched('text') ? 'touched' : 'not touched'}
        </Text>
      </Text>

      <Text size="sm">
        Dirty:{' '}
        <Text span color={form.isDirty('text') ? 'blue' : 'red'}>
          {form.isDirty('text') ? 'dirty' : 'not dirty'}
        </Text>
      </Text>
    </>
  );
}

RichTextEditor component now supports formats prop to restrict formats that user can use in the editor. In the following example three formats are enabled: bold, italic and underline, toolbar includes italic and underline controls, bold format can be added with Ctrl + B keyboard shortcut, other formats are not available:

import { useState } from 'react';
import { RichTextEditor } from '@mantine/rte';

function Demo() {
  const [value, onChange] = useState('<p>Rich text editor content</p>');
  return (
    <RichTextEditor
      id="rte"
      value={value}
      onChange={onChange}
      formats={['bold', 'italic', 'underline']}
      controls={[['italic', 'underline']]}
    />
  );
}

use-text-selection hook

use-text-selection allows to get current selected text on the page:

Select some text here or anywhere on the page and it will be displayed below

Selected text:

import { useTextSelection } from '@mantine/hooks';
function Demo() {
  const selection = useTextSelection();
  return (
    <>
      <div>Select some text here or anywhere on the page and it will be displayed below</div>
      <div>Selected text: {selection?.toString()}</div>
    </>
  );
}

use-debounced-state hook

use-debounced-state is an alternative for use-debounced-value for uncontrolled components:

Enter value to see debounce effect

Debounced value: [empty string]

import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useDebouncedState('', 200);

  return (
    <>
      <TextInput
        label="Enter value to see debounce effect"
        defaultValue={value}
        style={{ flex: 1 }}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </>
  );
}

Minimal Next.js template

You can now use minimal Next.js template that includes only basic server side rendering setup. It is useful when you want to set up your own tooltip (configuration for Jest, Storybook, ESLint, prettier and other tools is not included).

Other changes

New theme functions: theme.fn.primaryShade and theme.fn.primaryColor
Text component now supports strikethrough and italic props to add text-decoration and font-style styles.
Text component now supports span prop as a shorthand for component="span".
Carousel component now support keyboard events (switching slides with right/left arrows)
Accordion.Control component now has data-active attribute when Accordion.Item is expanded
RichTextEditor now uses value instead of defaultValue to manage state, note that component does not support react strict mode
Spotlight now supports disabled prop to prevent spotlight rendering when the prop is set to true
Select and MultiSelect components now support readOnly prop
use-toggle hook can now be called without options, it will use boolean values by default
Spotlight now supports searchInputProps prop that spreads props to search input
Popover.Dropdown now has data-position attribute with current position