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 clic en el botón.
Ejemplo
Importacion
Para importar el componente Back, se puede hacer desde fenextjs o fenextjs-component
import { Back, BackProps } from "fenextjs/cjs/component/Back";o
import { Back, BackProps } from "fenextjs-component/cjs/Back";Parametros
| Parametro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| loader | boolean | no | false | Si el componente esta en estado loader, con un indicardor de spiner y deshabilitada su funcionalidad |
| disabled | boolean | no | false | Si el componente esta en estado disabled, por ende se deshabilita su funcionalidad |
| onClick | function | no | Funcion que se ejecuta por onClick en el componente, (solo se ejecuta si loader y disabled son false) | |
| icon | ReactNode | no | Svg:PaginationPre | Icono del componente |
| children | ReactNode | no | "Back" | Contenido del componente |
| typeOnBack | "history" |"router" |"link" |"none" | no | "history" | Tipo de accion al ejecutar onClick en el componente |
| link | string | no | "" | El link a donde redireccionar si el campo typeOnBack = "link" |
| useHistoryMinLenght | boolean | no | false | Si el componente esta en estado useHistoryMinLenght, se verificara el valor de "window.history.length" para que sea mayor al parametro "minLenght", si la condicion no se cumple, el componente no se renderisa |
| minLenght | number | no | 2 | El valor de comparacion en caso de que "useHistoryMinLenght" sea true, la validacion para que no se renderice el componente es: window.history.length < minLenght |
| className | string | no | "" | Clase personalizada del componente |
| classNameDisabled | string | no | "" | Clase personalizada del componente cuando esta en estado disabled |
| classNameIcon | string | no | "" | Clase personalizada del icono |
| classNameContent | string | no | "" | Clase personalizada del contenido |
| classNameLoader | string | no | "" | Clase personalizada del componente cuando esta en estado loader |
Redireccionamiento
Dependiendo de el valor typeOnBack la redirecion se ejecutara de forma distrinta:
| typeOnBack | Redireccion | Descripcion |
|---|---|---|
| history | history.back() | Redirección a la página anterior mediante la historia del navegador |
| router | router.back() | Redirección a la página anterior mediante Next.js Router |
| link | router.push(link) | Rdirección a la url mediante Next.js Router |
| none | none | No se redirecciona |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Basico
<Back />- Back con texto personalizado
<Back>Go Back</Back>- Back con icono personalizado y tipo de redirección a una URL
<Back
icon={<img src="/custom-back-icon.svg" alt="Back Icon" />}
typeOnBack="link"
link="/previous-page"
>
Back to Previous Page
</Back>- Back en estado de carga (loader)
<Back loader={true}>Loading...</Back>- Back deshabilitado
<Back disabled={true}>Disabled Back</Back>- Back con redirección a la página anterior mediante Next.js Router
<Back typeOnBack="router">Go to Previous Route</Back>- Back con redirección a la página anterior mediante la historia del navegador
<Back typeOnBack="history">Go Back in History</Back>- Back con función personalizada
<Back onClick={() => alert("Custom function executed!")} typeOnBack="none">
Custom Click Function
</Back>