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: 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 formats

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:

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