Sweet Alert

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const BasicExample = () => {
    const Message = () => {
        MySwal.fire({
            html:
                '<div className="d-flex align-items-center"><i className="ri-calendar-check-line me-2 fs-1 text-success"></i><h4 className="mb-0">You created a new event</h4></div>',
            customClass: {
                content: 'p-0',
                actions: 'justify-content-start',
            },
            width: 400,
            showConfirmButton: false,
            buttonsStyling: false
        }
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" id="sweetalert_1" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default BasicExample;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const SweetAlert2 = () => {
    const Message = () => {
        Swal.fire({
        html:
        '<div className="d-flex align-items-center"><i className="ri-checkbox-line me-2 fs-3 text-success"></i><h5 className="text-success mb-0">Your task has been added!</h5></div><p className="mt-2">Check your email for the confirmation. Dont forget to set the reminder in your task list</p>',
        customClass: {
            content: 'p-0 text-start',
            confirmButton: 'btn btn-primary',
            actions: 'justify-content-start',
        },
        buttonsStyling: false,
    });
    }
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default SweetAlert2;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            html:
                '<div class="avatar avatar-icon avatar-soft-danger mb-3"><span class="initial-wrap rounded-8"><i class="ri-close-circle-fill"></i></span></div>
            <div>
                <h4 class="text-danger">Oops! API validation failed</h4>
                <p class=" mt-2">Please add a valid format for API and try again.</p>
            </div>',
            customClass: {
                container: 'swal2-has-footer',
                content: 'p-0',
                confirmButton: 'btn btn-primary',
            },
            buttonsStyling: false,
            footer: '<a href="#">Why do I have this issue?</a>'
        })
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            title: '<span>Permanently Delete: <i class="ri-folder-5-fill text-warning px-2"></i>Roboto cheesecake</span>',
            html:
                '<p>You are about to permanently delete <a href="#">roboto-cheesecake</a> and all its content .You will not be able to recover this folder or its content from recycle bin. <strong>This operation can not be undone.</strong></p><form class="mt-3"><div class="form-group"><label class="form-label" for="inputText">Type "DELETE" to confirm</label><input type="text" id="inputText" class="form-control" aria-describedby="passwordHelpBlock"></div></form>',
            customClass: {
                container: 'swal2-has-header',
                header: 'align-items-start',
                content: 'p-0 text-start',
                confirmButton: 'btn btn-danger',
                actions: 'justify-content-end mt-3',
                cancelButton: 'btn btn-secondary me-2',
            },
            showCancelButton: true,
            reverseButtons: true,
            confirmButtonText: 'Yes, delete it!',
            buttonsStyling: false,
        }).then((result) => {
            if (result.value) {
                Swal.fire({
                    html:
                        '<div class="d-flex align-items-center"><i class="ri-delete-bin-5-fill me-2 fs-3 text-danger"></i><h5 class="text-danger">Your file has been deleted!</h5></div>',
                    customClass: {
                        content: 'p-0 text-start',
                        confirmButton: 'btn btn-primary',
                        actions: 'justify-content-start',
                    },
                    buttonsStyling: false,
                })
            }
        })
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            position: 'top-end',
            icon: 'success',
            title: 'Your work has been saved',
            showConfirmButton: false,
            timer: 1500
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            title: 'Custom animation with Animate.css',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                )
            }
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = () => {
        Swal.fire({
            title: 'Sweet!',
            text: 'Modal with a custom image.',
            imageUrl: '

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const MessageWithAutoClose = () => {
    const Message = () => {
        let timerInterval
        Swal.fire({
            title: 'Auto close alert!',
            html: 'I will close in <b></b> milliseconds.',
            timer: 2000,
            timerProgressBar: true,
            didOpen: () => {
                Swal.showLoading()
                const b = Swal.getHtmlContainer().querySelector('b')
                timerInterval = setInterval(() => {
                    b.textContent = Swal.getTimerLeft()
                }, 100)
            },
            willClose: () => {
                clearInterval(timerInterval)
            }
        }).then((result) => {
           // Read more about handling dismissals below 
            if (result.dismiss === Swal.DismissReason.timer) {
                console.log('I was closed by the timer')
            }
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default MessageWithAutoClose;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const RtlMessage = () => {
    const Message = () => {
        Swal.fire({
            title: 'هل تريد الاستمرار؟',
            icon: 'question',
            iconHtml: '؟',
            confirmButtonText: 'نعم',
            cancelButtonText: 'لا',
            showCancelButton: true,
            showCloseButton: true
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default RtlMessage;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const SweetAlertWithAjax = () => {
    const Message = () => {
        Swal.fire({
            title: 'Submit your Github username',
            icon:'<i class="ri-github-fill"></i>',
            input: 'text',
            inputAttributes: {
                autocapitalize: 'off'
            },
            showCancelButton: true,
            confirmButtonText: 'Look up',
            showLoaderOnConfirm: true,
            preConfirm: (login) => {
                return fetch(`//api.github.com/users/${login}`)
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(response.statusText)
                        }
                        return response.json()
                    })
                    .catch(error => {
                        Swal.showValidationMessage(
                            `Request failed: ${error}`
                        )
                    })
            },
            allowOutsideClick: () => !Swal.isLoading()
        }).then((result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: `${result.value.login}'s avatar`,
                    imageUrl: result.value.avatar_url
                })
            }
        })
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default SweetAlertWithAjax;

import React from 'react'
import { Button } from 'react-bootstrap';
import Swal from 'sweetalert2';

const AlertWithModal = () => {
    const Message = async() => {
        const steps = ['1', '2', '3']
        const swalQueueStep = Swal.mixin({
            confirmButtonText: 'Next →',
            cancelButtonText: ' ← Forward',
            buttonsStyling: false,
            customClass: {
                content: 'pa-0',
                confirmButton: 'btn btn-primary me-15',
                cancelButton: 'btn btn-secondary',
                input: 'form-control'
            },
            progressSteps: steps,
            input: 'text',
            inputAttributes: {
                required: true
            },
            reverseButtons: true,
            validationMessage: 'This field is required'
        })

        const values = []
        let currentStep

        for (currentStep = 0; currentStep < steps.length;) {
            const result = await swalQueueStep.fire({
                title: `Question ${steps[currentStep]}`,
                input: 'text',
                inputValue: values[currentStep],
                showCancelButton: currentStep > 0,
                currentProgressStep: currentStep
            })

            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: '<h5 class="mb-10">All done!</h5>',
                html:
                    'Your answers: <pre><code>' +
                    JSON.stringify(values) +
                    '</code></pre><button class="btn btn-primary bg-twitter btn-wth-icon icon-wthot-bg me-15 mt-25"><span class="icon-label"><i class="fab fa-twitter"></i> </span><span class="btn-text">twitter</span></button><button class="btn btn-primary bg-facebook btn-wth-icon icon-wthot-bg mt-25"><span class="icon-label"><i class="fab fa-facebook"></i> </span><span class="btn-text">facebook</span></button>',
                buttonsStyling: false,
                customClass: {
                    content: 'pa-0',
                    confirmButton: 'btn btn-primary d-none',
                },
            })
        }
    };
  return (
    <div className="hstack flex-wrap align-items-start gap-3 p-4">
        <Button variant="primary" onClick={Message}>Try Me</Button>
    </div>
  )
}

export default AlertWithModal;