Back
El componente Back es una representación visual de un botón de retroceso (atrás) que permite al usuario navegar a la página anterior en la historia del navegador, utilizar la funcionalidad de Next.js Router, redirigir a una URL específica o simplemente ejecutar una función personalizada al hacer click en el botón.
Ejemplo
Importación
Para importar el componente Back, se puede hacer desde fenextjs
import { Back } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| loader | boolean | no | false | Indica si el componente está en estado de carga, mostrando un indicador de spinner y deshabilitando su funcionalidad. |
| disabled | boolean | no | false | Indica si el botón está deshabilitado. |
| onClick | function | no | undefined | Función personalizada que se ejecuta al hacer click en el botón. |
| icon | ReactNode | no | <PaginationPre /> | Icono que se muestra dentro del botón. |
| children | ReactNode | no | 'Back' | Contenido o texto que se muestra dentro del botón. |
| typeOnBack | 'history' | 'router' | 'link' | 'none' | no | 'history' | Tipo de acción a ejecutar al hacer click en el botón. |
| link | string | no | '' | URL a la que redirigir si 'typeOnBack' es 'link'. |
| useHistoryMinLenght | boolean | no | false | Determina si se debe mostrar el botón solo si el historial del navegador tiene una longitud mínima. |
| minLenght | number | no | 2 | Longitud mínima del historial del navegador para mostrar el botón. |
| className | string | no | '' | Clase CSS para personalizar el contenedor del botón. |
| classNameDisabled | string | no | '' | Clase CSS para el estado deshabilitado del botón. |
| classNameIcon | string | no | '' | Clase CSS para el icono del botón. |
| classNameContent | string | no | '' | Clase CSS para el contenido del botón. |
Redireccionamiento
Dependiendo del valor de 'typeOnBack', la redirección se ejecutará de la siguiente manera:
| Tipo de back | Redireccion | Descripción |
|---|---|---|
| history | history.back() | Redirección a la página anterior mediante el historial del navegador. |
| router | router.back() | Redirección utilizando el router de Next.js. |
| link | router.push(link) | Redirección a una URL específica. |
| none | Ninguna acción | No se realiza ninguna redirección. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Básico
<Back />- Back con texto personalizado
<Back>Go Back</Back>- Back con acción personalizada
<Back onClick={() => console.log("Botón clickeado")}>Volver</Back>- Back deshabilitado
<Back disabled={true} />