Introducción

MatNative UI Tools es un conjunto de componentes de interfaz de usuario (UI), hooks y utilidades para React Native, diseñados para mejorar la eficiencia en el desarrollo. Este proyecto fue desarrollado con el objetivo de agilizar los proyectos de Mateo, proporcionando una base sólida y reutilizable para la creación de interfaces de usuario en aplicaciones móviles.

Componentes

Button

El componente [Button] es un botón personalizable que puede incluir un título, un icono y variar en tamaño, color y forma.

Props

• [title]: String - El texto que se mostrará en el botón.
• [onPress]: Function - La función que se ejecutará cuando el botón sea presionado.
• [icon]: Any (opcional) - Un icono que se mostrará en el botón.
• [variant]: "square" | "light" | "pill" (opcional) - La variante de diseño del botón.
• [color]: String (opcional) - El color del botón.
• [size]: "small" | "medium" | "large" (opcional) - El tamaño del botón.
• [disabled]: Boolean (opcional) - Si el botón está deshabilitado.
• [isLoading]: Boolean (opcional) - Si se debe mostrar un indicador de carga en el botón.
• [className]: String (opcional) - Clases adicionales para estilos personalizados.
• [style]: StyleProp (opcional) - Estilos personalizados.

Card

El componente [Card] es una tarjeta que puede ser utilizada para mostrar contenido relacionado. Soporta personalización a través de estilos y clases.

Props

• [onPress]: Function (opcional) - La función que se ejecutará cuando la tarjeta sea presionada.
• [style]: StyleProp (opcional) - Estilos personalizados.
• [className]: String (opcional) - Clases adicionales para estilos personalizados.

Hooks

useThemeColors

Este hook permite acceder y modificar los colores del tema actual. Proporciona una forma fácil de implementar soporte para temas claros y oscuros en las aplicaciones.

Utilidades

Color Manipulation

Funciones de ayuda para manipular colores, incluyendo [darkenColor], [lightenColor] y [contrastColor], que permiten ajustar los colores para mejorar la accesibilidad y la coherencia visual.

Tematización

MatNative UI Tools incluye soporte para tematización, permitiendo definir paletas de colores para temas claros y oscuros, y cambiar entre ellos de manera dinámica.

Instalación

Para instalar MatNative UI Tools, puedes usar npm o yarn:

npm install matnative-ui-tools
# o
yarn add matnative-ui-tools

Contribuir

Si estás interesado en contribuir a MatNative UI Tools, por favor revisa las guías de contribución en el repositorio de GitHub. Agradecemos cualquier contribución, desde correcciones de errores hasta nuevas características.

Licencia

MatNative UI Tools es un proyecto de código abierto licenciado bajo la licencia ISC.