Использование основ Mantine в TypeScript для создания удобного React-приложения

Салимжанов Р.Д.

В современной веб-разработке важно не только создавать функциональные приложения, но и обеспечивать их удобство и привлекательный внешний вид. Библиотека Mantine

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

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

Для начала работы с Mantine необходимо установить библиотеку и ее зависимости. Вы можете сделать это с помощью npm или yarn:

npm install @mantine/core @mantine/hooks

или

yarn add @mantine/core @mantine/hooks

После установки библиотеки, мы можем обернуть наше приложение в MantineProvider, который предоставляет доступ ко всем компонентам и темам Mantine. В нашем примере это уже сделано в файле App.tsx:

import React from 'react'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Home from './components/Home'; import Login from './components/Login'; import { MantineProvider } from '@mantine/core'; import '@mantine/core/styles.css'; const App: React.FC = () => { return ( <MantineProvider> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> </Routes> </Router> </MantineProvider> ); }; export default App;

MantineProvider является корневым компонентом, который обеспечивает доступ к темам и стилям Mantine во всем приложении.

Для того чтобы стили компонентов Mantine корректно применялись, необходимо импортировать глобальные стили библиотеки. Это делается с помощью строки:

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

Этот импорт подключает базовые стили, которые необходимы для корректного отображения компонентов Mantine. Без этого шага компоненты могут выглядеть неправильно или не соответствовать ожидаемому дизайну. В нашем примере это уже сделано в файле App.tsx.

(не знаю почему именно кнопки, просто для примера я так захотел)

Mantine предоставляет компонент Button, который можно легко настроить под различные нужды. В версии Mantine 7 компоненты стали более модульными и гибкими, что позволяет разработчикам быстро создавать интерфейсы с минимальными усилиями.

Для работы с кнопками необходимо импортировать компонент Button из @mantine/core:

import { Button } from '@mantine/core';

Давайте рассмотрим несколько вариантов использования кнопок в Mantine:

<Button>Нажми меня</Button>

Это самая простая кнопка, которая отображает текст "Нажми меня". По умолчанию кнопка имеет стиль, соответствующий текущей теме Mantine.

<Button size="lg">Большая кнопка</Button>

Здесь мы используем проп size, чтобы изменить размер кнопки. Mantine поддерживает несколько размеров: xs, sm, md, lg, xl.

import { IconLogin } from '@tabler/icons-react'; <Button leftSection={<IconLogin />} variant="filled" color="blue"> Войти </Button>

В этом примере мы добавляем иконку слева от текста кнопки. Для этого используется проп leftSection. Иконка импортируется из библиотеки @tabler/icons-react, которая часто используется вместе с Mantine.

<Button variant="gradient" gradient={{ from: 'blue', to: 'cyan', deg: 45 }}> Градиентная кнопка </Button>

Здесь мы используем проп variant со значением gradient, чтобы создать кнопку с градиентным фоном. Проп gradient позволяет настроить цвета и угол градиента.

Вернемся к нашему компоненту Home, где мы используем кнопки:

import React from 'react'; import { Button, Title, Container } from '@mantine/core'; import { useNavigate } from 'react-router-dom'; import { IconLogin } from '@tabler/icons-react'; const Home: React.FC = () => { const navigate = useNavigate(); const handleLogin = () => { navigate('/login'); }; return ( <Container style={{ textAlign: 'center', marginTop: '50px', display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <Title order={1}>Добро пожаловать!</Title> <Button style={{ margin: '10px 0' }}>Нажми меня</Button> <Button size="lg" style={{ margin: '10px 0' }}>Большая кнопка</Button> <Button leftSection={<IconLogin />} variant="filled" color="blue" style={{ margin: '10px 0' }}> Войти </Button> <Button variant="gradient" gradient={{ from: 'blue', to: 'cyan', deg: 45 }} style={{ margin: '10px 0' }}> Градиентная кнопка </Button> </Container> ); }; export default Home;

Использование основ Mantine в TypeScript для создания удобного React-приложения

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

mantine.dev

Mantine

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

Использование Mantine в сочетании с TypeScript позволяет создавать современные, типобезопасные и легко поддерживаемые React-приложения. Библиотека предоставляет мощные инструменты для создания пользовательских интерфейсов, которые выглядят привлекательно и работают эффективно. В этой статье мы рассмотрели основы работы с Mantine, включая обертывание приложения в MantineProvider, создание простых кнопок и использование глобальных стилей. Вы же можете экспериментировать!!!

Использование основ Mantine в TypeScript для создания удобного React-приложения

Ведение

Обертывание проекта в Mantine

Импорт стилей Mantine

Создание простых кнопок с использованием Mantine

1. Базовая кнопка

2. Кнопка с измененным размером

3. Кнопка с иконкой

4. Кнопка с градиентом

Пример использования кнопок в компоненте Home

Удобство использования Mantine

Заключение