Complete React tools

🚀 Primitivas React headless, ultra-ligeras y completamente tipadas

Colección de hooks y componentes sin dependencias diseñados para resolver problemas comunes en aplicaciones React modernas. Cada package está optimizado para performance, bundle size y developer experience.

✨ Características principales

• 🪶 Ultra-ligeros: <3KB cada package (gzipped)
• 🎯 Headless: Sin estilos predefinidos, máxima personalización
• 📦 Tree-shakable: Solo importa lo que usas
• 🛡️ Type-safe: 100% TypeScript con tipos completos
• ⚡ SSR-ready: Compatible con Next.js, Remix, etc.
• 🔋 Sin dependencias: No añaden peso extra a tu bundle
• 🎨 API consistente: Mismo patrón de uso en todos los packages

📦 Packages disponibles

| Package | Descripción | Tamaño | npm | | -------------------------------------------------------- | --------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | complete-react-url-state | Estado sincronizado con la URL (querystring) | <2 kB | | | complete-react-storage | Estado sincronizado con localStorage/sessionStorage | <1.5 kB | | | complete-react-intersect | Hook IntersectionObserver simple y optimizado | <1 kB | | | complete-react-toast | Sistema de toasts dinámico y accesible | <3 kB | |

🚀 Instalación rápida

Cada package se puede instalar independientemente:

# Estado en URL
npm install complete-react-url-state

# Persistencia en storage
npm install complete-react-storage

# Intersection Observer
npm install complete-react-intersect

# Sistema de toasts
npm install complete-react-toast

💡 Ejemplos de uso

🔗 URL State - Filtros de búsqueda

import { useUrlState } from 'complete-react-url-state';

function SearchPage() {
  const [filters, setFilters] = useUrlState({
    q: '',
    category: 'all',
    page: 1
  });

  return (
    <div>
      <input
        value={filters.q}
        onChange={(e) => setFilters({ q: e.target.value, page: 1 })}
        placeholder="Buscar..."
      />
      {/* URL se actualiza automáticamente: ?q=react&category=all&page=1 */}
    </div>
  );
}

💾 Storage - Configuración persistente

import { useStorage } from 'complete-react-storage';

function UserSettings() {
  const [theme, setTheme] = useStorage('theme', 'light', {
    ttl: 7 * 24 * 60 * 60 * 1000, // 7 días
    crossTab: true // Sincroniza entre pestañas
  });

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Tema: {theme}
    </button>
  );
}

👁️ Intersection - Lazy loading

import { useInView } from 'complete-react-intersect';

function LazyImage({ src, alt }) {
  const [ref, inView] = useInView({ once: true });

  return (
    <div ref={ref}>
      {inView ? (
        <img src={src} alt={alt} />
      ) : (
        <div className="skeleton" />
      )}
    </div>
  );
}

🍞 Toast - Notificaciones

import { ToastProvider, useToast } from 'complete-react-toast';

function App() {
  return (
    <ToastProvider>
      <MyComponent />
    </ToastProvider>
  );
}

function MyComponent() {
  const toast = useToast();

  const handleSave = async () => {
    try {
      await saveData();
      toast.success('¡Guardado exitosamente!');
    } catch (error) {
      toast.error('Error al guardar');
    }
  };

  return <button onClick={handleSave}>Guardar</button>;
}

🎯 ¿Por qué Complete React tools?

📊 Comparación con alternativas

| Característica | Complete React | Otras librerías | | -------------- | ---------------- | ------------------- | | Bundle size | <3KB por package | 5-15KB típico | | Dependencies | ❌ Zero deps | ⚠️ Múltiples deps | | TypeScript | ✅ Nativo | ⚠️ Tipos opcionales | | Tree-shaking | ✅ Completo | ⚠️ Parcial | | SSR Support | ✅ First-class | ⚠️ Problemático | | API Design | ✅ Consistente | ⚠️ Fragmentado |

🎨 Filosofía de diseño

• Simplicidad: APIs intuitivas que siguen las convenciones de React
• Composabilidad: Cada hook hace una cosa y la hace bien
• Performance: Optimizaciones internas para minimizar re-renders
• Flexibilidad: Headless por defecto, personalizable al 100%

🛠️ Desarrollo

Configuración del monorepo

# Instalar dependencias
pnpm install

# Build todos los packages
pnpm -r build

# Ejecutar tests
pnpm -r test

# Ejecutar tests en modo watch
pnpm -r test:watch

# Linting
pnpm -r lint

Estructura del proyecto

packages/
├── react-url-state/     # Sincronización con URL
├── react-storage/       # Persistencia en storage
├── react-intersect/     # Intersection Observer
└── react-toast/         # Sistema de toasts

demos/                   # Ejemplos de uso
├── demo-url-state/
├── demo-storage/
├── demo-intersect/
└── demo-toast/

🔗 Recursos

• 📚 Documentación completa: Cada package incluye README detallado
• 🎮 Demos interactivos: Ejemplos funcionando en /demos
• 🌐 Web oficial: complete-react-tools.vercel.app - Documentación completa y demos en vivo
• 🐛 Issues: GitHub Issues
• 💬 Discusiones: GitHub Discussions

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor:

1. Fork el repositorio
2. Crea una branch feature (git checkout -b feature/amazing-feature)
3. Commit tus cambios (git commit -m 'Add amazing feature')
4. Push a la branch (git push origin feature/amazing-feature)
5. Abre un Pull Request

Guidelines

• Añade tests para nuevas funcionalidades
• Mantén la cobertura de tests >90%
• Sigue las convenciones de TypeScript
• Actualiza la documentación correspondiente

📄 Licencia

MIT © Nacho Rodríguez Sanz

🌟 ¿Te gusta el proyecto?

Si estos packages te son útiles, considera:

• ⭐ Dar una estrella al repositorio
• 🐛 Reportar bugs o sugerir mejoras
• 📢 Compartir con la comunidad
• 🤝 Contribuir con código