Modal

Diálogo animado que se desliza desde abajo y aparece con fade sobre un fondo semitransparente. Se inserta en document.body mediante un portal de React. Hacer clic en el fondo llama a onClose. Un botón de cierre opcional aparece en la esquina superior derecha. Soporta modo pantalla completa.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el modal está visible. | | onClose | () => void | Sí | — | Se ejecuta al hacer clic en el fondo o en el botón de cierre. | | children | ReactNode | Sí | — | Contenido del modal. | | showCloseButton | boolean | No | true | Muestra u oculta el botón de cierre integrado. | | closeIcon | string | No | 'close' | Nombre del ícono del botón de cierre. | | closeIconSize | number | No | 24 | Tamaño del ícono de cierre. | | fullScreen | boolean | No | false | El modal ocupa toda la pantalla. | | zIndex | number | No | 1000 | Z-index base del fondo. | | id | string | No | 'modal-root' | ID del elemento raíz del portal. | | onAnimationComplete | () => void | No | — | Se ejecuta 500 ms después de que isOpen cambia. | | backdropStyle | React.CSSProperties | No | — | Estilos del fondo semitransparente. | | windowStyle | React.CSSProperties | No | — | Estilos de la ventana del modal. | | closeButtonStyle | React.CSSProperties | No | — | Estilos del botón de cierre. |

Uso

Básico

import { useState } from 'react';
import Modal from '@/components/Modal';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Abrir Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <div style={{ padding: 24 }}>
          <h2>Confirmar Acción</h2>
          <p>¿Estás seguro de que deseas continuar?</p>
          <button onClick={() => setOpen(false)}>Cancelar</button>
        </div>
      </Modal>
    </>
  );
}

Modal en pantalla completa

import { useState } from 'react';
import Modal from '@/components/Modal';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Pantalla Completa</button>
      <Modal
        isOpen={open}
        onClose={() => setOpen(false)}
        fullScreen
        windowStyle={{ overflow: 'auto' }}
      >
        <div style={{ padding: 32 }}>Contenido en pantalla completa</div>
      </Modal>
    </>
  );
}