mantinedev/mantine 5.1.0 on GitHub

Colors index reference

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

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:

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

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:

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

New Contributors

@nmay231 made their first contribution in #1978
@kumarasinghe made their first contribution in #2022

Full Changelog: 5.0.3...5.1.0