useModal

El hook useModal controla el estado de un modal con opciones de almacenamiento local y personalización de eventos de activación y cierre.

Importación

Para importar el componente useModal, se puede hacer desde fenextjs

import { useModal } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Descripcion
name	string	no	Identificador único para el modal.
nameLocalStorage	string	no	Clave utilizada para almacenar el estado activo del modal en el almacenamiento local.
activeByNameLocalStorage	boolean	no	Si está activo, permite controlar el estado del modal a través del almacenamiento local usando el último nombre almacenado.
activeByNameContentLocalStorage	boolean	no	Permite controlar el estado del modal usando todos los nombres almacenados en el almacenamiento local.
active	boolean	no	Estado de activación del modal pasado como propiedad.
defaultActive	boolean	no	Valor inicial del estado activo del modal.
onActive	() => void	no	Función que se ejecuta cuando el modal se activa.
onClose	() => void	no	Función que se ejecuta cuando el modal se cierra.
onChange	(d: boolean) => void	no	Función que se ejecuta al cambiar el estado del modal.
disabled	boolean	no	Deshabilita las acciones sobre el modal si está establecido en `true`.

Returns

Parametro	Tipo	Descripcion
active	boolean	Estado actual del modal, considerando el valor almacenado y el estado de recarga.
activeNameLast	boolean	Indica si el nombre del modal es el último en la lista del almacenamiento local.
activeName	boolean	Indica si el nombre del modal está presente en la lista del almacenamiento local.
listNamesLocalStorage	string[]	Lista de nombres de modales almacenados en el almacenamiento local.
onChange	(d: boolean) => void	Función para actualizar el estado del modal.
onActive	() => void	Función para activar el modal.
onClose	() => void	Función para cerrar el modal.

Usos

Uso básico del hook useModal

const { active, onActive, onClose } = useModal({
  name: "myModal",
  defaultActive: false,
  onActive: () => console.log("Modal activado"),
  onClose: () => console.log("Modal cerrado"),
});

Control de estado usando almacenamiento local

const { active, listNamesLocalStorage } = useModal({
  name: "myModal",
  nameLocalStorage: "modalState",
  activeByNameLocalStorage: true,
  onChange: (isActive) => console.log("Estado del modal:", isActive),
});

useJsonString useNotification