paso a paso

Una biblioteca para crear flujos de trabajo paso a paso en tus aplicaciones

• Rápido y eficiente

• Potente y flexible

• Ligero (< 1kB comprimido)

• Totalmente seguro para escribir

• Arquitectura componible

• Sin estilo para una máxima personalización

Instalación

 instalación npm @stepperize/react

Inicio rápido

1. Importar el constructor:

 importar {defineStepper} desde "@stepperize/react";

2. Define tus pasos:

 const { Alcance, useStepper, pasos } = defineStepper(
  { id: "paso-1", título: "Paso 1", descripción: "Descripción del paso 1" },
  { id: "paso-2", título: "Paso 2", descripción: "Descripción del paso 2" },
  { id: "paso-3", título: "Paso 3", descripción: "Descripción del paso 3" },
  { id: "paso-4", título: "Paso 4", descripción: "Descripción del paso 4" });

3. Utilice el gancho en sus componentes:

 función Componente paso a paso() {
  const {pasoactual,pasosiguiente,pasoprev} = useStepper();

  return (
 
{currentStep.title}
 
{currentStep.description}
 Anterior  Siguiente
  );}

Cómo funciona

Stepperize le permite definir una serie de pasos con ID únicas. Cuando creas tus pasos usando defineStepper , obtienes:

• Un componente Scoped para la gestión del contexto

• Un gancho useStepper para control de pasos

• Una serie de steps para renderizar

El único campo obligatorio para cada paso es el id . Puede agregar cualquier propiedad adicional que necesite y serán completamente seguras cuando use el gancho.

Documentación

Para obtener información más detallada sobre el uso, la configuración y las funciones avanzadas, visite nuestra documentación completa.

Contribuyendo

¡Agradecemos las contribuciones! Consulte nuestra Guía de contribución para obtener más detalles.

Licencia

Stepperize tiene licencia del MIT.