Estilizando sua aplicação com Mantine no React
Tags: react, beginners, programming
Published: 2023-03-09 15:49:29

Ao desenvolver um código em React, temos diversas bibliotecas de estilização, algumas fornecendo diversas possibilidades como Styled- Component, Material Ui, Chakra e outros. Mas existe uma biblioteca que trabalha com os próprios componentes do React, e é uma excelente opção para os que buscam um serviço mais dinamizado. Por isso, nesse artigo iremos falar sobre o MANTINE.

O Mantine é uma biblioteca de componentes React de código aberto que oferece um conjunto completo de componentes personalizáveis e estilizados para criar aplicativos da web modernos e responsivos. 

O objetivo do Mantine é ajudar os desenvolvedores a economizar tempo e aumentar a produtividade, fornecendo um conjunto de componentes reutilizáveis e consistentes que podem ser usados ​​em uma variedade de projetos.

As diversas características dele são:

- Componentes personalizáveis: Os componentes do Mantine são altamente personalizáveis ​​e podem ser facilmente adaptados para atender às necessidades específicas do seu projeto. 

- Design responsivo: Todos os componentes do Mantine são projetados para funcionar em uma ampla gama de dispositivos e tamanhos de tela. Eles são testados e otimizados para funcionar bem em desktops, laptops e outros

- Acessibilidade: O Mantine é construído com componentes desenvolvidos para serem facilmente acessíveis por usuários com deficiências visuais ou motoras.

- Desempenho: O Mantine é otimizado para desempenho e carregamento rápido. A biblioteca é projetada para minimizar o tamanho do bundle e reduzir o tempo de renderização.

- Temas: O Mantine vem com vários temas pré-construídos que podem ser usados ​​para dar ao seu aplicativo uma aparência consistente e profissional. Você também pode criar seus próprios temas personalizados.


**Instalando o Mantine -**

O Mantine pode ser instalado via `npm` ou `yarn`, pelos seguintes comandos:

```
npm install @mantine/core @mantine/hooks @emotion/react
```

```
yarn add @mantine/core @mantine/hooks @emotion/react
```

E para aplicar o Mantine no seu projeto, usando MantineProvider:

```
import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}
```


**Criando com Mantine -**

Para compreender o uso do Mantine, veja a criação de um botão importado dessa biblioteca:

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

function App() {
  return (
    <Button color="blue">Clique aqui</Button>
  );
}
```

Vejamos a criação de um botão booleano que muda conforme ele é clicado por meio de um hook no Mantine:

```
import { useDisclosure } from "@mantine/hooks";

export default function UseDisclosure() {
  const [sideNav, handlers] = useDisclosure(false);

  return (
    <div>
     <button onClick={() => handlers.open()}>Open</button>
     <button onClick={() => handlers.close()}>Close</button>
     <button onClick={() => handlers.open()}>Toggle</button>
      
 <span>
Side navigation is <strong> {sideNav ? "opened" : "closed"}</strong>
 </span>
    </div>
  );
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9f74c9kilef073ivbm5.png)


Ao clicar em um dos botões acima, no botão `Open`, ele abrirá, caso seja no `Close` ele será fechado, com `Toggle`será o mesmo de `Open`.


Em resumo, o Mantine é uma biblioteca de componentes React poderosa e personalizável que pode ajudá-lo a construir aplicativos da web modernos e responsivos com facilidade. Com sua abordagem centrada no desenvolvedor e sua ampla gama de recursos, o Mantine é uma escolha sólida para desenvolvedores React que desejam economizar tempo e aumentar a produtividade em seus projetos.