Mantine UI: modernūs React komponentai

Kas yra Mantine ir kodėl jis tapo toks populiarus

Jei dirbi su React’u, tikriausiai jau matei dešimtis komponentų bibliotekų – nuo seno gero Material-UI iki Ant Design ar Chakra UI. Bet pastaraisiais metais viena biblioteka išsiskyrė iš minios ir sugebėjo pritraukti tikrai daug dėmesio – tai Mantine. Ir ne be priežasties.

Mantine – tai visapusiška React komponentų biblioteka, kuri siūlo ne tik gražius, moderniai atrodančius komponentus, bet ir labai gerai apgalvotą kūrėjo patirtį. Biblioteka atsirado 2021 metais ir per trumpą laiką tapo vienu iš sparčiausiai augančių projektų GitHub’e. Šiuo metu ji turi daugiau nei 20,000 žvaigždučių ir aktyvią bendruomenę.

Kas ją daro tokią ypatingą? Pirma, Mantine suteikia daugiau nei 100 komponentų, kurie veikia iš dėžės. Antra, ji turi puikią TypeScript palaikymą – ne tokį, kur tipai pridėti vėliau kaip priedas, o tikrai gerai apgalvotą type safety visoje bibliotekoje. Trečia, ji siūlo labai lankstų temų sistemą, kuri leidžia pritaikyti dizainą be košmariško CSS perrašinėjimo.

Diegimas ir pirmieji žingsniai

Pradėti dirbti su Mantine yra tikrai paprasta. Jei naudoji npm:

npm install @mantine/core @mantine/hooks

Arba su yarn:

yarn add @mantine/core @mantine/hooks

Svarbu suprasti, kad Mantine v7 (naujausia versija rašant šį straipsnį) reikalauja React 18 ar naujesnės versijos. Taip pat reikės emotion – CSS-in-JS bibliotekos, kuri yra Mantine pagrindas. Bet nesijaudink, ji diegiama automatiškai kaip dependency.

Po diegimo reikia apvynioti savo aplikaciją su MantineProvider. Tai atrodo maždaug taip:


import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';

function App() {
return (

{/* Tavo aplikacijos turinys */}

);
}


Viena iš dalykų, kurie man asmeniškai labai patinka – nereikia importuoti kiekvieno komponento stilių atskirai. Užtenka vieną kartą importuoti pagrindinį CSS failą, ir viskas veikia. Tai gerokai supaprastina setup procesą, ypač didesniuose projektuose.

Komponentų arsenalo apžvalga

Mantine komponentų biblioteka yra tikrai išsami. Čia rasi viską – nuo paprastų mygtukų iki sudėtingų duomenų lentelių ir modalinių langų. Pažvelkime į keletą kategorijų:

Formos ir įvesties laukai – čia Mantine tikrai žiba. TextInput, Select, MultiSelect, DatePicker – visi šie komponentai ne tik gražiai atrodo, bet ir turi puikią validacijos palaikymą. Integruojasi su populiariomis formų bibliotekomis kaip react-hook-form ar Formik be jokių problemų.

Navigacija ir išdėstymas – AppShell komponentas leidžia greitai sukurti aplikacijos layout’ą su header’iu, sidebar’u ir footer’iu. Tabs, Breadcrumbs, Pagination – visa tai jau paruošta ir veikia puikiai.

Duomenų atvaizdavimas – Table, Card, Timeline, Accordion – šie komponentai padeda struktūrizuoti ir gražiai pateikti informaciją. Ypač patinka DataTable iš @mantine/datatable paketo – jis turi sorting’ą, filtravimą, pagination’ą ir dar daugybę funkcijų.

Overlay’ai ir modalai – Modal, Drawer, Popover, Tooltip – visi šie komponentai turi puikią accessibility palaikymą ir veikia sklandžiai net mobiliuose įrenginiuose.

Kas svarbu – visi šie komponentai yra pilnai pritaikomi. Galima keisti spalvas, dydžius, border radius ir beveik bet kokį kitą vizualinį aspektą be jokio CSS rašymo.

Temų sistema ir stilizavimas

Čia Mantine tikrai išsiskiria iš kitų bibliotekų. Temų sistema yra labai galinga, bet kartu ir intuityvi. Galima sukurti custom temą perduodant theme prop’ą į MantineProvider:



{/* App */}



Bet tai tik paviršius. Galima apibrėžti visą spalvų paletę, shadow’us, spacing’ą, breakpoint’us ir dar daugybę dalykų. Mantine naudoja 10 spalvų tonų sistemą kiekvienai spalvai – nuo šviesesnių iki tamsesnių atspalvių. Tai labai patogu kuriant sudėtingesnius UI.

Viena iš galingiausių funkcijų – galimybė sukurti custom komponentų variantus. Pavyzdžiui, jei nori, kad visi tavo Button komponentai turėtų specifinį stilių, gali tai apibrėžti temoje:


theme={{
components: {
Button: {
defaultProps: {
size: 'md',
variant: 'filled',
},
styles: (theme) => ({
root: {
fontWeight: 600,
textTransform: 'uppercase',
},
}),
},
},
}}


Taip pat Mantine palaiko dark mode iš dėžės. Galima lengvai perjungti tarp šviesios ir tamsios temos naudojant useMantineColorScheme hook’ą. Ir kas svarbiausia – visi komponentai automatiškai prisitaiko prie pasirinktos temos.

Hooks biblioteka – paslėpta brangenybė

Daugelis žmonių žino Mantine dėl jo komponentų, bet @mantine/hooks paketas yra tikras lobis. Čia rasi daugiau nei 40 custom React hooks, kurie sprendžia įvairias kasdienes problemas.

useLocalStorage – saugo state’ą localStorage su automatine serializacija ir deserializacija. Veikia kaip paprastas useState, bet duomenys išlieka net perkrovus puslapį.

useMediaQuery – leidžia reaguoti į ekrano dydžio pasikeitimus. Labai patogu responsive dizainui:


const isMobile = useMediaQuery('(max-width: 768px)');


useClickOutside – aptinka paspaudimus už elemento ribų. Idealus modalams ir dropdown’ams uždaryti.

useDebounce – debounce’ina reikšmes. Būtinas dalykas search input’ams ar bet kokiai situacijai, kur nori sumažinti API call’ų skaičių.

useIntersection – naudoja Intersection Observer API lazy loading’ui ar infinite scroll funkcionalumui.

Šie hooks yra gerai ištestruoti, turi TypeScript palaikymą ir veikia visose naršyklėse. Nereikia rašyti savo implementacijų ar ieškoti atskirų bibliotekų – viskas jau yra.

Formų valdymas su @mantine/form

Formos – viena iš sudėtingiausių dalykų bet kurioje aplikacijoje. Mantine siūlo savo formų valdymo sprendimą, kuris yra labai galingas, bet kartu ir paprastas naudoti.

@mantine/form paketas suteikia useForm hook’ą, kuris valdo formų state’ą, validaciją ir submission’ą. Štai paprastas pavyzdys:


import { useForm } from '@mantine/form';
import { TextInput, Button } from '@mantine/core';

);
}


Kas čia vyksta? useForm hook’as sukuria formą su pradinėmis reikšmėmis ir validacijos taisyklėmis. getInputProps metodas automatiškai susieja input’ą su formos state’u ir validacija. Nereikia rašyti onChange handler’ių ar error state’ų – viskas tvarkoma automatiškai.

Mantine forms palaiko nested objektus, array’us, dynamic fields, async validaciją ir dar daugybę funkcijų. Jei dirbi su sudėtingomis formomis, tikrai verta išbandyti.

Performansas ir bundle size

Vienas iš svarbiausių dalykų renkantis komponentų biblioteką – koks bus poveikis aplikacijos dydžiui ir performansui. Mantine čia yra gana geras, nors ne idealus.

Pilna Mantine biblioteka su visais komponentais yra apie 150KB gzipped. Tai nėra mažai, bet ir ne katastrofiška. Svarbu suprasti, kad nereikia importuoti visko – galima naudoti tik tuos komponentus, kurių reikia, ir modern bundler’iai (Vite, Webpack 5) automatiškai atliks tree-shaking’ą.

Praktikoje, jei naudoji 10-15 komponentų, bundle size papildomas apie 40-60KB. Tai priimtinas kompromisas už visą funkcionalumą, kurį gauni.

Kas liečia runtime performansą – Mantine yra optimizuotas ir veikia sklandžiai net su dideliais duomenų kiekiais. Komponentai naudoja React.memo kur reikia, ir nėra jokių akivaizdžių bottleneck’ų. Testavau su lentelėmis, kuriose buvo tūkstančiai eilučių, ir viskas veikė gerai su virtualizacija.

Vienas patarimas – jei kuri labai didelę aplikaciją, apsvarstyk code-splitting’ą ir lazy loading’ą sunkesniems komponentams kaip DataTable ar RichTextEditor. Tai padės išlaikyti initial bundle size mažesnį.

Ekosistema ir bendruomenė

Mantine turi augančią ekosistemą papildomų paketų. Be pagrindinės bibliotekos, yra:

@mantine/dates – data picker’iai ir kalendoriai su dayjs integracija
@mantine/notifications – notification sistema su queue valdymu
@mantine/modals – modal’ų manager’is su context API
@mantine/spotlight – command palette komponentas (kaip VS Code command palette)
@mantine/carousel – carousel komponentas su Embla Carousel pagrindu
@mantine/dropzone – failų upload’ui su drag and drop

Dokumentacija yra tikrai puiki – kiekvienas komponentas turi interaktyvius pavyzdžius, props lentelę ir dažniausiai pasitaikančius use case’us. Galima eksperimentuoti su props’ais tiesiog dokumentacijoje ir matyti rezultatus realiu laiku.

Bendruomenė yra aktyvi Discord serveryje ir GitHub discussions. Kūrėjas Vitaly Rtishchev yra labai responsive ir dažnai atsako į klausimus bei priima pull request’us. Tai duoda pasitikėjimą, kad projektas nėra apleistas ir toliau vystysis.

Kada Mantine yra geras pasirinkimas (ir kada ne)

Mantine puikiai tinka, jei:
– Kuri naują projektą nuo nulio ir nori greitai gauti gražų UI
– Dirbi su TypeScript ir vertini gerą type safety
– Reikia daug įvairių komponentų ir nesinori kurti jų pačiam
– Nori lankstų stilizavimą be CSS rašinėjimo
– Vertini gerą dokumentaciją ir aktyvią bendruomenę

Mantine galbūt nėra geriausias pasirinkimas, jei:
– Dirbi su labai specifiniais dizaino reikalavimais, kurie labai skiriasi nuo Mantine estetikos
– Bundle size yra kritinis faktorius ir kiekvienas KB svarbus
– Jau turi esamą projektą su kita komponentų biblioteka ir migracija būtų per daug darbo
– Reikia palaikyti senus React versijas (Mantine v7 reikalauja React 18+)

Asmeniškai naudojau Mantine keliuose projektuose – nuo admin dashboard’ų iki customer-facing aplikacijų. Patirtis buvo labai pozityvi. Ypač patiko, kaip greitai galima sukurti profesionaliai atrodančią aplikaciją be dizainerio pagalbos. Komponentai atrodo moderniai ir veikia gerai visose naršyklėse.

Viena iš situacijų, kur Mantine išgelbėjo – turėjau sukurti sudėtingą formą su conditional fields, nested arrays ir real-time validacija. Su @mantine/form tai užtruko gal pusę laiko, palyginus su tuo, ką būčiau praleisdęs su vanilla React ar net react-hook-form.

Ką reikia žinoti prieš pradedant

Jei nusprendei naudoti Mantine, štai keletas praktinių patarimų, kurie padės išvengti įprastų klaidų:

Skaityk dokumentaciją – aš žinau, skamba banaliai, bet Mantine dokumentacija tikrai verta laiko. Ten rasi ne tik API reference, bet ir best practices, performance tips ir dažniausiai pasitaikančius use case’us.

Naudok TypeScript – net jei paprastai nerašai su TypeScript, su Mantine tikrai verta. Type hints labai padeda suprasti, kokius props’us galima perduoti ir kokios yra galimos reikšmės.

Eksperimentuok su tema – nepasitenkink default stiliais. Sukurk savo spalvų paletę, apibrėžk custom spacing’ą ir font’us. Tai padės tavo aplikacijai išsiskirti ir atrodys ne kaip „dar viena Mantine aplikacija”.

Naudok hooks – @mantine/hooks paketas turi daug naudingų dalykų. Prieš rašydamas custom hook’ą, patikrink, gal jis jau egzistuoja Mantine bibliotekoje.

Optimizuok bundle size – importuok tik tai, ko reikia. Jei naudoji Vite ar Webpack 5, tree-shaking veiks automatiškai, bet vis tiek verta sekti, kas patenka į finalinį bundle.

Testuok accessibility – nors Mantine komponentai turi gerą a11y palaikymą, vis tiek verta testuoti su screen reader’iais ir keyboard navigation. Ypač jei kuri aplikaciją, kuri turi atitikti WCAG standartus.

Mantine UI yra brandus, gerai dokumentuotas ir aktyviai prižiūrimas projektas, kuris tikrai vertas dėmesio. Jis siūlo puikų balansą tarp funkcionalumo, estetikos ir kūrėjo patirties. Jei ieškoti modernios React komponentų bibliotekos, kuri leistų greitai kurti gražias aplikacijas be kompromisų – Mantine turėtų būti tavo short list’e. Išbandyk jį kitame projekte, ir yra didelė tikimybė, kad jis taps tavo default pasirinkimu.