Crear un Alert Dialog para React usando un componente

Tiempo de lectura: 2 minutos

Hoy vamos a aprender como utilizar un Custom Alert Dialog en React.

Para crear este Dialog, voy a utilizar la librería de Mui (https://mui.com/)

Primero tendremos que instalarla:

npm install @mui/material @emotion/react @emotion/styled

Ahora vamos a crear nuestro componente al que llamaremos CustomAlert.js

import React, { useState, useEffect } from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

let setOpenExt;
let setParamsExt;

const AlertDialog = () => {
    const [open, setOpen] = useState(false);
    const [alertParams, setAlertParams] = useState({
        customTitle: '',
        customContent: '',
        customCancelText: '',
        customAcceptText: '',
        displayCancelButton: true,
        onCancel: () => {},
        onAccept: () => {},
    });

    useEffect(() => {
        setParamsExt = (params) => {
            setAlertParams(params);
        };
        setOpenExt = setOpen;
    }, []);

    const handleClose = () => {
        setOpen(false);
        if (alertParams.onCancel) {
            alertParams.onCancel();
        }
    };

    const handleAgree = () => {
        handleClose();
        if (alertParams.onAccept) {
            alertParams.onAccept();
        }
    };

    return (
        <React.Fragment>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
                PaperProps={{
                    style: {
                        maxWidth: '400px',
                        width: '100%',
                    },
                }}
            >
                <DialogTitle id="alert-dialog-title">
                    {alertParams.customTitle}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        {alertParams.customContent}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    {alertParams.displayCancelButton && (
                        <Button onClick={handleClose}>
                            {alertParams.customCancelText}
                        </Button>
                    )}
                    <Button onClick={handleAgree} autoFocus>
                        {alertParams.customAcceptText || 'Aceptar'}
                    </Button>
                </DialogActions>
            </Dialog>
        </React.Fragment>
    );
};

export default AlertDialog;

export const mostrarAlerta = (params) => {
    setParamsExt(params);
    setOpenExt(true);
};

Para utilizar nuestro alert podemos hacer lo siguiente:

import React from 'react';
import AlertDialog, { mostrarAlerta } from './CustomAlert';  // Ajusta la ruta según la estructura de tu proyecto

const MiScreen = () => {
    const handleMostrarAlerta = () => {
        mostrarAlerta({
            customTitle: 'Título de la alerta',
            customContent: 'Contenido de la alerta',
            customCancelText: 'Cancelar',
            customAcceptText: 'Aceptar',
            displayCancelButton: true,
            onCancel: () => {
                console.log('Acción cancelada');
            },
            onAccept: () => {
                console.log('Acción aceptada');
            },
        });
    };

    return (
        <div>
            <AlertDialog/>
            <h1>Mi Screen</h1>
            <button onClick={handleMostrarAlerta}>Mostrar Alerta</button>

            {/* Puedes agregar más contenido del screen aquí */}
        </div>
    );
};

export default MiScreen;

Recuerda que para utilizarlo, deberás importar el alert:

import AlertDialog, { mostrarAlerta } from './CustomAlert';  // Asegúrate de ajustar la ruta correcta

Después crear el componente en la pantalla:

 <AlertDialog/>

Y puedes usarlo de esta forma:

 mostrarAlerta({
            customTitle: 'Título de la alerta',
            customContent: 'Contenido de la alerta',
            customCancelText: 'Cancelar',
            customAcceptText: 'Aceptar',
            displayCancelButton: true,
            onCancel: () => {
                console.log('Acción cancelada');
            },
            onAccept: () => {
                console.log('Acción aceptada');
            },
        });