Search for a command to run...
I'm a self-made indie developer, passionate about freedom and curiosity. Working in my own stuff from México, learning all the time, and eager to collaborate with the entire world. I'm learning to write (English and Spanish) so here I am.
No comments yet. Be the first to comment.
I was playing around with Qwik. The most insanely fast web framework out there. Yes, the most. And this is mainly because of the philosophy behind Qwik and its creator. Which you can read about here. An excellent read. If you ever liked Angular like ...
El método forEach() del Array, ejecuta la función que le provees una vez por cada elemento en el array.(Mdn docs). Básicamente, el método forEach es una de las mejores maneras para usar un ciclo en un array, es mucho más simple que usar un for(). Lo ...
Si eres un desarrollador front end seguro sabes que no deberías decirle JavaScript. También si te gusta estar actualizado(a) o si eres parte de la comunidad OSS (Open Source) seguro sabrás este grupo de datos, con lo que desde hace ya varios años les...
… Y ahora soy plenamente feliz.
Hablamos todo el tiempo de las buenas prácticas y estilos de código, pero pocas veces hablamos de las malas prácticas en las que inconscientemente caemos muy seguido. Por ello, quiero compartirte 3 malas prácticas en JavaScript que podría ser que no ...
La composición en React es el corazón del framework y es muy curioso cómo es menospreciada tanto.
Es tan fácil crear componentes en React, que olvidamos esforzarnos un poco por crear componentes que puedan ser usados en la composición de otros, que puedan reutilizarse fácilmente y que puedan convertirse en el fundamento de nuevos componentes más complejos que no haremos nosotros, que harán otros programadores.
Cuando programamos en un pequeño grupo o de forma individual, olvidamos que debemos programar y producir componentes para otros developers, que esa debe ser la premisa de nuestra calidad.
Por eso, en este post vamos a pasar por 3 reglas básicas para crear componentes verdaderamente resuables y vamos a aprender estas 3 regleas básicas construyendo un botón que puedas reusar en todos tus proyectos React + Tailwind, de ahora en adelante.
Podríamos pensar en colocar props para colocar iconos, ya sea a la izquierda o a la derecha, pero esto nos limitaría tal vez a utilizar una librería específica de iconos, y es mucho mejor permitir al developer emplear la librería que prefiera. Logramos esta libertad colocando props que reciban ReactNode en vez de strings, pero aún mejor podemos dejar al developer decidir el contenido del botón en totalidad. Aquí están las 2 opciones:
import { type ReactNode } from 'react';
type ButtonProps = {
children: ReactNode;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
};
export default function Button({ children, leftIcon, rightIcon }: ButtonProps) {
return (
<button className='flex'>
{leftIcon}
{children}
{rightIcon}
</button>
);
}
En este ejemplo, podemos ver que recibimos de forma opcional los iconos tanto de la izquierda como de la derecha, y son opcionales principalmente porque también podemos incluir estos iconos en children. Todos son ReactNode, lo que facilita la composición.
Hay un grupo de propiedades que un boton posee, que también queremos recibir en nuestro componente, estos valores son booleanos y los nombres de las propiedades no son tan semánticos como nos gustaría, pero estamos generando nuestro propio componente y podemos hacer más obvio el nombre de estos props, así que ¡hagámoslo!
import { type ReactNode } from 'react';
type ButtonProps = {
children: ReactNode;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
isDisabled?: boolean;
type?: 'submit' | 'button';
};
export default function Button({
children,
leftIcon,
rightIcon,
isDisabled,
type = 'button',
}: ButtonProps) {
return (
<button disabled={isDisabled} type={type} className='flex'>
{leftIcon}
{children}
{rightIcon}
</button>
);
}
Observa cómo hemos convertido la propiedad disabled en isDisabled para nuestro componente. También agregamos el prop opcional type, de esta forma todos nuestros botones estarán estandarizados y podremos ser explícitos con un botón que es parte de un formulario.
Hay algo más que quiero agregar a nuestro botón, me gustaría darle la oportunidad de mostrar un estado de cargo con el prop isLoading para que muestre un spinner e incluso gregar el prop loadingText por si el developer necesita mostrar un texto personalizado cuando isLoading es true
import { type ReactNode } from 'react';
type ButtonProps = {
children: ReactNode;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
isDisabled?: boolean;
type?: 'submit' | 'button';
isLoading?: boolean;
loadingText?: string | null;
};
export default function Button({
children,
leftIcon,
rightIcon,
isDisabled,
type = 'button',
isLoading,
loadingText = null,
}: ButtonProps) {
return (
<button disabled={isDisabled} type={type} className='flex'>
{isLoading && (
<div className='w-8 h-8 border border-t-2 border-t-blue-500 animate-spin rounded-full' />
)}
{!isLoading && leftIcon}
{isLoading ? loadingText : children}
{!isLoading && rightIcon}
</button>
);
}
Estos son todos los props que vamos a utilizar, observa como el estado de loading modifica el contenido del botón al mismo tiempo que involucra el loadingText, no hay problema si el texto no se recibe pues resultará en null
Para terminar nuestro botón, vamos a permitirle al developer decidir qué colores se usarán tanto para el background como para el outline y el loading spinner.
¡Ojo! 👀 en un proyecto con un equipo dividido entre diseñadores y developer o incluso en un equipo mediano, no es buena idea permitir los estilos de tus componentes, estos estilos deberían ser fijos y definidos dentro de un design system, pero si los componentes son para tus propios proyectos, bueno, si querras manipular los estilos.
import { useMemo, type ReactNode } from 'react';
type ButtonProps = {
children: ReactNode;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
isDisabled?: boolean;
type?: 'submit' | 'button';
isLoading?: boolean;
loadingText?: string | null;
bgColor?: string;
outlineColor?: string;
};
export default function Button({
children,
leftIcon,
rightIcon,
isDisabled,
type = 'button',
isLoading,
loadingText = null,
bgColor = 'blue-500',
outlineColor = 'blue-800',
}: ButtonProps) {
const classname = useMemo(() => {
return `flex gap-2 m-2 rounded-md bg-${bgColor} px-4 py-2 text-white outline-${outlineColor} transition-all hover:scale-105 active:scale-100`;
}, [outlineColor, bgColor]);
const spinnerClassname = `w-8 h-8 border border-t-2 border-t-${outlineColor} animate-spin rounded-full`;
return (
<button
className={classname}
disabled={isDisabled}
type={type}
>
{isLoading && <div className={spinnerClassname} />}
{!isLoading && leftIcon}
{isLoading ? loadingText : children}
{!isLoading && rightIcon}
</button>
);
}
Este es un aproach donde tú decides que partes de los estilos le permites al developer manipular, en nuestro caso solo le permitimos decidir sobre el background y el outline como colores más importantes. Pero no le estamos permitiendo decidir sobre espacios, tamaños y más posibilidades, nos inundaríamos de props solo para estilos y por más que nos esforzaramos en ser flexibles no lograríamos serlo lo suficiente. Por eso es mejor permitirle al developer controlar el prop className por completo:
import { useMemo, type ReactNode } from 'react';
type ButtonProps = {
children: ReactNode;
leftIcon?: ReactNode;
rightIcon?: ReactNode;
isDisabled?: boolean;
type?: 'submit' | 'button';
isLoading?: boolean;
loadingText?: string | null;
bgColor?: string;
outlineColor?: string;
className?: string;
};
export default function Button({
children,
leftIcon,
rightIcon,
isDisabled,
type = 'button',
isLoading,
loadingText = null,
bgColor = 'blue-500',
outlineColor = 'blue-800',
className,
}: ButtonProps) {
const classname = useMemo(() => {
return `flex gap-2 m-2 rounded-md bg-${bgColor} px-4 py-2 text-white outline-${outlineColor} transition-all hover:scale-105 active:scale-100`;
}, [outlineColor, bgColor]);
const spinnerClassname = `w-8 h-8 border border-t-2 border-t-${outlineColor} animate-spin rounded-full`;
return (
<button
className={classname + ' ' + className}
disabled={isDisabled}
type={type}
>
{isLoading && <div className={spinnerClassname} />}
{!isLoading && leftIcon}
{isLoading ? loadingText : children}
{!isLoading && rightIcon}
</button>
);
}
En este punto, hay muchas decisiones que dependen del estilo, prácticas y hábitos del developer, recuerda que no existe una sola verdad.
También en este punto tienes un botón reusable que además es personalizable y que puedes utilizar con confianza en cualquiera de tus proyectos.
De esta forma puedes tener 2 o 3 className predefinidas que uses en todo tu sitio web y solo para el prop variant con el nombre correspondiente y aplicar la className correspondiente, evitándote pasar todo el string del className.
¡Y ya está! has creado tu primer botón reutilizable con composición básica y Tailwind. Si te gustaría producir más componentes conmigo, no dejes de decírmelo en mi Twitter y con gusto puedo generar el componente que estés necesitando. No olvides suscribirte al newsletter para enterarte de los siguientes componentes.
Checa el resultado en Codesandbox
Abrazo. Bliss.