Cómo crear una biblioteca personal de componentes con React

Cuando desarrollamos varios proyectos con React, es común repetir componentes como botones, formularios, tarjetas, modales, alertas o menús. Una solución profesional es crear una biblioteca personal de componentes reutilizables, que permita mantener un diseño consistente y acelerar el desarrollo.

1. Crear la estructura del proyecto

Podemos comenzar con una carpeta independiente para nuestra biblioteca:

mi-ui/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   └── Button.css
│   │   ├── Card/
│   │   │   ├── Card.jsx
│   │   │   └── Card.css
│   │   └── Input/
│   │       ├── Input.jsx
│   │       └── Input.css
│   └── index.js
├── package.json
└── README.md

La idea es que cada componente tenga su propia lógica y estilos.

2. Crear componentes reutilizables

Por ejemplo, podemos crear un botón:

function Button({ children, type = "primary", onClick }) {
  return (
    <button className={`button ${type}`} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

Ahora podemos utilizarlo en diferentes proyectos:

<Button>Guardar</Button>

<Button type="secondary">
  Cancelar
</Button>

El componente no está limitado a un texto específico y puede recibir diferentes propiedades.

3. Centralizar las exportaciones

En src/index.js podemos exportar todos nuestros componentes:

export { default as Button } from "./components/Button/Button";
export { default as Card } from "./components/Card/Card";
export { default as Input } from "./components/Input/Input";

Esto permite importarlos fácilmente:

import { Button, Card, Input } from "mi-ui";

4. Definir un sistema de diseño

Una biblioteca realmente útil no debería ser solamente una colección de componentes. También podemos establecer reglas visuales.

Por ejemplo:

• Colores principales.
• Tipografías.
• Tamaños de botones.
• Espaciados.
• Bordes y sombras.
• Estados hover, focus y disabled.

Podemos guardar estos valores como variables CSS:

:root {
  --primary: #2563eb;
  --text: #1f2937;
  --radius: 8px;
  --spacing: 16px;
}

De esta manera, modificar el diseño general resulta mucho más sencillo.

5. Documentar los componentes

Es importante explicar cómo utilizar cada componente. Podemos crear un README.md con ejemplos:

Button
- primary
- secondary
- disabled

Card
- title
- content
- footer

- footer

Para proyectos más grandes también podemos utilizar herramientas como Storybook, que permite visualizar, probar y documentar los componentes de manera independiente.

6. Convertirla en un paquete reutilizable

Cuando la biblioteca esté madura, podemos publicarla como un paquete privado o público mediante un registro como npm.

Así podremos instalarla en diferentes proyectos:

npm install mi-ui

Y posteriormente:

import { Button, Card } from "mi-ui";

Crear una biblioteca personal de componentes en React permite evitar código repetido, mantener una interfaz consistente y desarrollar aplicaciones más rápidamente. Lo recomendable es comenzar con componentes sencillos como Button, Input, Card y Modal, establecer un sistema de diseño y, cuando la biblioteca crezca, incorporar herramientas de documentación y pruebas.

La clave está en diseñar componentes flexibles, reutilizables y fáciles de mantener, en lugar de crear componentes demasiado específicos para un solo proyecto.