Una de las características principales, y más polémicas, de la comunidad de desarrolladores de Javascript es su dinamismo y creación frecuente de nuevos frameworks, y bibliotecas.
Una de estas “nuevas” bibliotecas es “Mantine”, una biblioteca de hooks y componentes de React de código abierto con licencia del MIT centrada en la usabilidad, la accesibilidad y la experiencia de desarrollador.
En este artículo repasaremos algunas de las características más importantes de Mantine, que pueden ser interesantes para el desarrollo web de tu próximo proyecto con React, y mejorar tu productividad.
5 Características principales de Mantine
- Personalizable
Puedes personalizar los colores, o las fuentes para adaptarlos a tus necesidades.
- Accesibilidad y usabilidad
Como hemos dicho antes, los componentes siguen las buenas prácticas de accesibilidad y tienen compatibilidad total con el teclado.
- TypeScript
Los paquetes @mantine están desarrollados con TypeScript y lo admiten de forma predeterminada.
- Experiencia de desarrollador
Una experiencia de desarrollador optimizada es clave para la adopción de una herramienta. Por eso, Mantine viene con más de 50 componentes y 15 hooks que cubren la mayoría de los casos, y necesidades.
- React JSS
Mantine te permite aprovechar todas las características de react-jss.
Además de las características anteriores, vale la pena referir que Mantine admite el “tema oscuro” de forma predeterminada en todos los componentes, está preparado para producción, y además es rápido porque no tiene grandes dependencias.
Puedes utilizar npm o yarn, como en cualquier otro proyecto de React para instalar los paquetes de Mantine.
Ejemplos de hooks y componentes de Mantine
- Hook: useLocalStorageValue
useLocalStorageValue es un hook de React que te permite usar el valor de localStorage como estado (state) de React. Funciona como useState, pero también escribe el valor en el almacenamiento local (localStorage).
import React from 'react';
import { useLocalStorageValue } from '@mantine/hooks';
import { ActionIcon } from '@mantine/core';
import { SunIcon, MoonIcon } from '@modulz/radix-icons';
function ColorSchemeToggle() {
const [colorScheme, setColorScheme] = useLocalStorageValue({
key: 'color-scheme',
defaultValue: 'light',
});
const toggleColorScheme = () =>
setColorScheme((current) => (current === 'dark' ? 'light' : 'dark'));
return (
{colorScheme === 'dark' ? : }
);
}
- Hook: useDebouncedValue
useDebouncedValue es un hook útil en caso de que quieras realizar una operación pesada basada en el estado (state) de React.
import React, { useState } from 'react';
import { useDebouncedValue } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';
export function Demo() {
const [value, setValue] = useState('');
const [debounced] = useDebouncedValue(value, 200);
return (
<>
setValue(event.currentTarget.value)} />
Value: {value}
Debounced value: {debounced}
);
}
- Componente: Drawer (Cajón deslizante)
Drawer es un componente que te permite mostrar el área de superposición en cualquier lado de la pantalla.
import React, { useState } from 'react';
import { Drawer, Button, Group } from '@mantine/core';
function Demo() {
const [opened, setOpened] = useState(false);
return (
<>
setOpened(false)}
padding="md">
Press escape to close the drawer
);
}
Conclusión
Mantine es solamente una herramienta más de React/Javascript que te puede ayudar a mejorar la productividad. Si quieres conocer más, antes de instalarlo en tu proyecto, puedes consultar la documentación y los ejemplos disponibles en el sitio web oficial de Mantine. Eso sí, ¡úsala con responsabilidad!
¿Crees que Manine es realmente útil para tus proyectos? ¡Coméntalo abajo!
@kues1 @freepik
Fuente:
