Mantine 5.0 – полнофункциональная библиотека компонентов Mant | Заметки про React

Mantine 5.0 – полнофункциональная библиотека компонентов

Mantine – библиотека компонентов для React 18, написанная на TypeScript и Emotion. Включает более 100 готовых компонентов и 40 хуков.

Библиотека разделена на модули, которые можно устанавливать по необходимости. Например, есть модули для работы с формами (аналог react-hook-form) и для работы с датами (компоненты календаря, выбора даты). Также есть модуль для обеспечения серверного рендера компонентов.

Библиотека поддерживает глобальную кастомизацию стилей через создание темы. Также можно кастомизировать отдельные компоненты в месте использования. Есть поддержка темной темы.

import { Slider } from '@mantine/core';
import { useHover } from '@mantine/hooks';

export function SliderHover() {
const { hovered, ref } = useHover();

return (
defaultValue={40}
min={10}
max={90}
ref={ref}
label={null}
styles={{
thumb: {
transition: 'opacity 150ms ease',
opacity: hovered ? 1 : 0,
},

dragging: {
opacity: 1,
},
}}
/>
);
}


https://mantine.dev/