import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import Swal from 'sweetalert2'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../store/themeConfigSlice'; const SweetAlert = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Sweet Alerts')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const showAlert = async (type: number) => { if (type === 1) { Swal.fire({ title: 'Saved succesfully', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 2) { Swal.fire({ icon: 'success', title: 'Good job!', text: 'You clicked the!', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 3) { const ipAPI = 'https://api.ipify.org?format=json'; Swal.fire({ title: 'Your public IP', confirmButtonText: 'Show my public IP', text: 'Your public IP will be received via AJAX request', showLoaderOnConfirm: true, customClass: 'sweet-alerts', preConfirm: async () => { try { const response = await fetch(ipAPI); const data = await response.json(); Swal.fire({ title: data.ip, customClass: 'sweet-alerts', }); } catch { Swal.fire({ icon: 'error', title: 'Unable to get your public IP', customClass: 'sweet-alerts', }); } }, }); } else if (type === 4) { Swal.fire({ icon: 'question', title: 'The Internet?', text: 'That thing is still around?', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 5) { const steps = ['1', '2', '3']; const swalQueueStep = Swal.mixin({ confirmButtonText: 'Next →', showCancelButton: true, progressSteps: steps, input: 'text', inputAttributes: { required: 'true', }, validationMessage: 'This field is required', padding: '2em', customClass: 'sweet-alerts', }); const values: any = []; let currentStep; for (currentStep = 0; currentStep < steps.length; ) { const result = await swalQueueStep.fire({ title: `Question ${steps[currentStep]}`, text: currentStep === 0 ? 'Chaining swal modals is easy.' : '', inputValue: values[currentStep], showCancelButton: currentStep > 0, currentProgressStep: currentStep, customClass: 'sweet-alerts', }); if (result.value) { values[currentStep] = result.value; currentStep++; } else if (result.dismiss === Swal.DismissReason.cancel) { currentStep--; } else { break; } } if (currentStep === steps.length) { Swal.fire({ title: 'All done!', padding: '2em', html: 'Your answers: 
' + JSON.stringify(values) + '
', confirmButtonText: 'Lovely!', customClass: 'sweet-alerts', }); } } else if (type === 6) { Swal.fire({ title: 'Custom animation with Animate.css', showClass: { popup: 'animate__animated animate__flip', }, hideClass: { popup: 'animate__animated animate__fadeOutUp', }, padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 7) { let timerInterval: string | number | NodeJS.Timer | undefined; Swal.fire({ title: 'Auto close alert!', html: 'I will close in milliseconds.', timer: 2000, timerProgressBar: true, didOpen: () => { // Swal.showLoading(); const b: any = Swal.getHtmlContainer()?.querySelector('b'); timerInterval = setInterval(() => { b.textContent = Swal.getTimerLeft(); }, 100); }, willClose: () => { clearInterval(timerInterval); }, }).then((result) => { if (result.dismiss === Swal.DismissReason.timer) { console.log('I was closed by the timer'); } }); } else if (type === 8) { Swal.fire({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: '/assets/images/custom-swal.svg', imageWidth: 224, imageHeight: 'auto', imageAlt: 'Custom image', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 9) { Swal.fire({ icon: 'info', title: 'HTML example', html: 'You can use bold text, links and other HTML tags', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: ' Great!', confirmButtonAriaLabel: 'Thumbs up, great!', cancelButtonText: ' Cancel', cancelButtonAriaLabel: 'Thumbs down', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 10) { Swal.fire({ icon: 'warning', title: 'Are you sure?', text: "You won't be able to revert this!", showCancelButton: true, confirmButtonText: 'Delete', padding: '2em', customClass: 'sweet-alerts', }).then((result) => { if (result.value) { Swal.fire({ title: 'Deleted!', text: 'Your file has been deleted.', icon: 'success', customClass: 'sweet-alerts' }); } }); } else if (type === 11) { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'btn btn-secondary', cancelButton: 'btn btn-dark ltr:mr-3 rtl:ml-3', popup: 'sweet-alerts', }, buttonsStyling: false, }); swalWithBootstrapButtons .fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', reverseButtons: true, padding: '2em', }) .then((result) => { if (result.value) { swalWithBootstrapButtons.fire('Deleted!', 'Your file has been deleted.', 'success'); } else if (result.dismiss === Swal.DismissReason.cancel) { swalWithBootstrapButtons.fire('Cancelled', 'Your imaginary file is safe :)', 'error'); } }); } else if (type === 12) { Swal.fire({ title: 'Custom width, padding, background.', width: 600, padding: '7em', customClass: 'background-modal sweet-alerts', background: '#fff url(/assets/images/sweet-bg.jpg) no-repeat 100% 100%', }); } else if (type === 13) { Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: 'Why do I have this issue?', padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 14) { Swal.fire({ title: 'هل تريد الاستمرار؟', confirmButtonText: 'نعم', cancelButtonText: 'لا', showCancelButton: true, showCloseButton: true, padding: '2em', customClass: 'sweet-alerts', }); } else if (type === 15) { const toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, }); toast.fire({ icon: 'success', title: 'Signed in successfully', padding: '10px 20px', }); } }; return (
Documentation: https://www.npmjs.com/package/sweetalert2
{/* basic */}
Basic message
{codeArr.includes('code1') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 1) {
        Swal.fire({
            title: 'Saved succesfully',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}





    



`}
)}
{/* message */}
Success message
{codeArr.includes('code2') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 2) {
        Swal.fire({
            icon: 'success',
            title: 'Good job!',
            text: 'You clicked the!',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}





    



`}
)}
{/* Dynamic */}
Dynamic queue
{codeArr.includes('code3') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
     if (type === 3) {
        const ipAPI = 'https://api.ipify.org?format=json';
        Swal.fire({
            title: 'Your public IP',
            confirmButtonText: 'Show my public IP',
            text: 'Your public IP will be received via AJAX request',
            showLoaderOnConfirm: true,
            customClass: 'sweet-alerts',
            preConfirm: async () => {
                try {
                    const response = await fetch(ipAPI);
                    const data = await response.json();
                    Swal.fire({
                        title: data.ip,
                        customClass: 'sweet-alerts',
                    });
                } catch {
                    Swal.fire({
                        icon: 'error',
                        title: 'Unable to get your public IP',
                        customClass: 'sweet-alerts',
                    });
                }
            },
        });
    }
}



    

        
    


`}
)}
{/* A title with text */}
A title with a text under
{codeArr.includes('code4') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 4) {
        Swal.fire({
            icon: 'question',
            title: 'The Internet?',
            text: 'That thing is still around?',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* Chaining modals */}
Chaining modals (queue)
{codeArr.includes('code5') && ( 
                                    {`import Swal from 'sweetalert2';

if (type === 5) {
    const steps = ['1', '2', '3'];
    const swalQueueStep = Swal.mixin({
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: steps,
        input: 'text',
        inputAttributes: {
            required: 'true',
        },
        validationMessage: 'This field is required',
        padding: '2em',
        customClass: 'sweet-alerts',
    });
    const values: any = [];
    let currentStep;
    for (currentStep = 0; currentStep < steps.length; ) {
        const result = await swalQueueStep.fire({
            title: \`Question \${steps[currentStep]}\`,
            text: currentStep === 0 ? 'Chaining swal modals is easy.' : '',
            inputValue: values[currentStep],
            showCancelButton: currentStep > 0,
            currentProgressStep: currentStep,
            customClass: 'sweet-alerts',
        });
        if (result.value) {
            values[currentStep] = result.value;
            currentStep++;
        } else if (result.dismiss === Swal.DismissReason.cancel) {
            currentStep--;
        } else {
            break;
        }
    }
    if (currentStep === steps.length) {
        Swal.fire({
            title: 'All done!',
            padding: '2em',
            html: 'Your answers: 
' + JSON.stringify(values) + '
',
            confirmButtonText: 'Lovely!',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* Animation */}
Custom animation

Custom animation with Animate.css

{codeArr.includes('code6') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 6) {
        Swal.fire({
            title: 'Custom animation with Animate.css',
            showClass: {
                popup: 'animate__animated animate__flip',
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp',
            },
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    

    

        

            
Custom animation with Animate.css

            
        

    


`}
)}
{/* Auto close timer */}
Message with auto close timer
{codeArr.includes('code7') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 7) {
        let timerInterval: string | number | NodeJS.Timer | undefined;
        Swal.fire({
            title: 'Auto close alert!',
            html: 'I will close in  milliseconds.',
            timer: 2000,
            timerProgressBar: true,
            didOpen: () => {
                //   Swal.showLoading();
                const b: any = Swal.getHtmlContainer()?.querySelector('b');
                timerInterval = setInterval(() => {
                    b.textContent = Swal.getTimerLeft();
                }, 100);
            },
            willClose: () => {
                clearInterval(timerInterval);
            },
        }).then((result) => {
            if (result.dismiss === Swal.DismissReason.timer) {
                console.log('I was closed by the timer');
            }
        });
    }
}



    

        
    


`}
)}
{/* Custom image */}
Message with custom image
{codeArr.includes('code8') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 8) {
        Swal.fire({
            title: 'Sweet!',
            text: 'Modal with a custom image.',
            imageUrl: '/assets/images/custom-swal.svg',
            imageWidth: 224,
            imageHeight: 'auto',
            imageAlt: 'Custom image',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* Custom HTML */}
Custom HTML description and buttons
{codeArr.includes('code9') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
     if (type === 9) {
        Swal.fire({
            icon: 'info',
            title: 'HTML example',
            html: 'You can use bold text, links and other HTML tags',
            showCloseButton: true,
            showCancelButton: true,
            focusConfirm: false,
            confirmButtonText: ' Great!',
            confirmButtonAriaLabel: 'Thumbs up, great!',
            cancelButtonText: ' Cancel',
            cancelButtonAriaLabel: 'Thumbs down',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* Warning message */}
{`Warning message, with "Confirm" button`}
{codeArr.includes('code10') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 10) {
        Swal.fire({
            icon: 'warning',
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            showCancelButton: true,
            confirmButtonText: 'Delete',
            padding: '2em',
            customClass: 'sweet-alerts',
        }).then((result) => {
            if (result.value) {
                Swal.fire({ title: 'Deleted!', text: 'Your file has been deleted.', icon: 'success', customClass: 'sweet-alerts' });
            }
        });
    }
}



    

        
    


`}
)}
{/* Cancel */}
{`Execute something else for "Cancel".`}
{codeArr.includes('code11') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
     if (type === 11) {
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-secondary',
                cancelButton: 'btn btn-dark ltr:mr-3 rtl:ml-3',
                popup: 'sweet-alerts',
            },
            buttonsStyling: false,
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true,
                padding: '2em',
            })
            .then((result) => {
                if (result.value) {
                    swalWithBootstrapButtons.fire('Deleted!', 'Your file has been deleted.', 'success');
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    swalWithBootstrapButtons.fire('Cancelled', 'Your imaginary file is safe :)', 'error');
                }
            });
    }
}



    

        
    


`}
)}
{/* Custom Style */}
A message with custom width, padding and background
{codeArr.includes('code12') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 12) {
        Swal.fire({
            title: 'Custom width, padding, background.',
            width: 600,
            padding: '7em',
            customClass: 'background-modal sweet-alerts',
            background: '#fff url(/assets/images/sweet-bg.jpg) no-repeat 100% 100%',
        });
    }
}



    

        
    


`}
)}
{/* Footer */}
With Footer
{codeArr.includes('code13') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 13) {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong!',
            footer: 'Why do I have this issue?',
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* RTL */}
RTL support
{codeArr.includes('code14') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 14) {
        Swal.fire({
            title: 'هل تريد الاستمرار؟',
            confirmButtonText: 'نعم',
            cancelButtonText: 'لا',
            showCancelButton: true,
            showCloseButton: true,
            padding: '2em',
            customClass: 'sweet-alerts',
        });
    }
}



    

        
    


`}
)}
{/* Mixin */}
Mixin
{codeArr.includes('code15') && ( 
                                    {`import Swal from 'sweetalert2';

const showAlert = async (type: number) => {
    if (type === 15) {
        const toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
        });
        toast.fire({
            icon: 'success',
            title: 'Signed in successfully',
            padding: '10px 20px',
        });
    }
}



    

        
    



    `}
)}
); }; export default SweetAlert;