SweetAlert2 to biblioteka JavaScript, która umożliwia łatwe tworzenie atrakcyjnych i responsywnych alertów i okien dialogowych w przeglądarce internetowej. Biblioteka ta jest rozwinięciem oryginalnej biblioteki SweetAlert i oferuje szereg nowych funkcji i usprawnień.
SweetAlert2 umożliwia tworzenie różnych typów alertów i okien dialogowych, w tym potwierdzeń, ostrzeżeń, błędów, informacji i wiele innych. Biblioteka ta zapewnia również wiele opcji konfiguracyjnych, takich jak niestandardowe teksty, ikony, tła i wiele innych, co pozwala na łatwe dostosowanie alertów do potrzeb projektu.
Aby użyć biblioteki SweetAlert2 z React, możesz zainstalować paczkę sweetalert2 przy użyciu menedżera pakietów np. npm lub yarn:
npm install sweetalert2
Następnie musisz zaimportować bibliotekę i użyć jej wewnątrz komponentu React. Możesz to zrobić w następujący sposób:
import Swal from 'sweetalert2';
function MyComponent() {
const handleClick = () => {
Swal.fire({
title: 'Hello!',
text: 'This is a SweetAlert2 dialog!',
icon: 'success',
confirmButtonText: 'OK'
});
};
return (
<button onClick={handleClick}>
Click me to show SweetAlert2 dialog!
</button>
);
}
W tym przykładzie Swal.fire jest użyte do wywołania dialogu SweetAlert2 po kliknięciu przycisku. Możesz dostosować wygląd dialogu, zmieniając wartości w obiekcie konfiguracyjnym, przekazywanym do metody fire.
Więcej informacji można znaleźć na stronie biblioteki tutaj.