Estilizando sua aplicação com Mantine no React

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>
  );
}

Ao clicar em um dos botões acima, no botão Open, ele abrirá, caso seja no Close ele será fechado, com Toggleserá 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.