Расширения Mantine: dates, charts, dropzone

Такой подход даёт три преимущества.

Во-первых, размер бандла не растёт, если функциональность не нужна: календарь или графики просто не попадают в сборку, пока вы не установили соответствующий пакет.

Во-вторых, все расширения используют одну систему темизации — цвета, отступы и радиусы, заданные через createTheme, автоматически применяются и к новым компонентам.

В-третьих, версии расширений синхронизированы с версией @mantine/core, поэтому не приходится вручную подбирать совместимые релизы.

Топ-3 пакета Mantine для реальных проектов

1. @mantine/dates — календари, пикеры даты, времени и диапазонов на основе dayjs
2. @mantine/charts — линейные, столбчатые, областные и составные графики на движке recharts
3. @mantine/dropzone — зона для перетаскивания и загрузки файлов с валидацией по типу и размеру

Внутри используется библиотека dayjs — лёгкая альтернатива moment.js, которая почти наверняка уже знакома вам, если вы раньше работали с датами в JavaScript.

Установка и стили

Установите пакет и его единственную обязательную зависимость, а затем подключите файл стилей строго после стилей @mantine/core — порядок импорта здесь важен, иначе часть визуальных эффектов календаря потеряется.

npm install @mantine/dates dayjs

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';

DatePickerInput и его вариации

Базовый компонент для выбора одной даты — DatePickerInput. Он выглядит как обычное текстовое поле, а по клику открывает всплывающий календарь.

import { DatePickerInput } from '@mantine/dates';
 
function Demo() {
  return (
    <DatePickerInput
      label="Дата рождения"
      placeholder="Выберите дату"
      clearable
    />
  );
}

Чтобы разрешить выбор диапазона или сразу нескольких дат, достаточно поменять проп type: значение range вернёт кортеж из двух дат, а multiple — массив выбранных значений. Для сценариев, где важна не только дата, но и время, есть отдельный компонент DateTimePicker, который поддерживает почти все пропсы DatePicker, включая presets — готовые варианты вроде «Сегодня» или «Следующий месяц», отображаемые рядом с календарём. Отдельно стоят MonthPickerInput и YearPickerInput — они полезны там, где точная дата не нужна, например в фильтрах отчётов по месяцам.

Пакет оборачивает популярную библиотеку recharts в компоненты, оформленные в едином стиле Mantine и реагирующие на смену цветовой схемы. Все графики принимают массив data, ключ оси dataKey и массив series с описанием каждой линии, области или столбца.

Установка и импорт стилей

npm install @mantine/charts recharts

import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

LineChart, AreaChart и BarChart

import { LineChart } from '@mantine/charts';
 
const data = [
  { month: 'Янв', продажи: 1200 },
  { month: 'Фев', продажи: 1900 },
  { month: 'Мар', продажи: 1400 },
];
 
function SalesChart() {
  return (
    <LineChart
      h={300}
      data={data}
      dataKey="month"
      withLegend
      series={[{ name: 'продажи', color: 'indigo.6' }]}
    />
  );
}

AreaChart и BarChart используют тот же набор пропсов, поэтому переключение между типами графика часто сводится к замене одного импорта. Проп type со значением stacked превращает обычный график в накопительный, а withBrush добавляет под графиком мини-шкалу для выделения нужного диапазона данных — это особенно удобно для дашбордов с большим количеством точек. Кроме перечисленных компонентов пакет включает ScatterChart, PieChart, RadarChart и компактный Sparkline для мини-графиков внутри карточек.

Компонент Dropzone построен поверх react-dropzone и добавляет проверку типа и размера файлов прямо на уровне пропсов, без ручного написания валидации.

Установка и базовый пример

npm install @mantine/dropzone

import '@mantine/core/styles.css';
import '@mantine/dropzone/styles.css';
 
import { Group, Text } from '@mantine/core';
import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 
function ImageDropzone() {
  return (
    <Dropzone
      onDrop={(files) => console.log('принято', files)}
      onReject={(files) => console.log('отклонено', files)}
      maxSize={5 * 1024 ** 2}
      accept={IMAGE_MIME_TYPE}
    >
      <Group justify="center" mih={160}>
        <Text>Перетащите изображения сюда или кликните для выбора&lt;/Text>
      &lt;/Group>
    &lt;/Dropzone>
  );
}

Состояния Accept, Reject и Idle

Внутри Dropzone доступны три служебных компонента: Dropzone.Accept отображается, когда перетаскиваемый файл проходит проверку по типу и размеру, Dropzone.Reject — когда не проходит, а Dropzone.Idle — в состоянии покоя, пока пользователь ничего не перетаскивает. Через них удобно менять иконку или текст в зависимости от текущего статуса, не храня это состояние вручную в компоненте. Готовые наборы MIME-типов вроде IMAGE_MIME_TYPE или PDF_MIME_TYPE избавляют от необходимости переписывать строки MIME-типов вручную.

Три пакета решают разные задачи и почти никогда не конкурируют друг с другом внутри одного проекта — обычно вопрос стоит не «что выбрать», а «что подключить в первую очередь». Например, страница профиля пользователя вполне может одновременно использовать пикер даты рождения, график активности за месяц и зону для загрузки аватара: все три компонента будут выглядеть частями единого интерфейса, а не разрозненными сторонними виджетами.

Мы рассмотрели три официальных расширения Mantine: пикеры дат из @mantine/dates, графики из @mantine/charts и загрузку файлов через @mantine/dropzone. Каждое из них подключается отдельным пакетом и файлом стилей, но при этом наследует общую тему приложения, так что интерфейс остаётся визуально цельным.

В следующем, заключительном уроке курса подведём итоги всего пройденного и разберём, где искать документацию, готовые примеры и вдохновение для дальнейшей работы с Mantine.