Verwenden von React-Bootstrap-Modals in React-Anwendungen

1. Bootstrap 3 Modals in React
2. Bootstrap 4 & 5 Modals in React

Sie sind wahrscheinlich schon einmal auf Modals gestoßen. Sie sehen aus wie Popups und erscheinen, nachdem Sie auf eine bestimmte Schaltfläche geklickt oder eine andere Aktion ausgeführt haben. Sie können sie auch in Ihren eigenen React-Anwendungen verwenden.

Bei richtiger Verwendung können Modalelemente die Benutzererfahrung einer React-App verbessern.

Sie sind sehr effektiv, um die Aufmerksamkeit der Benutzer auf ein wesentliches Merkmal der Website zu lenken oder ihre Eingaben zu erhalten. Wenn Ihr Benutzer beispielsweise versehentlich auf ein wichtiges UI-Element geklickt hat, können Sie ihn mit einem Modal fragen, ob er sich seiner Wahl sicher ist.

Bei der Entwicklung einer React-App können Sie mithilfe von regulärem JavaScript, HTML und CSS eine benutzerdefinierte Modal-Komponente erstellen. Wenn Sie jedoch nicht sicher sind, dass Sie eine benutzerdefinierte Lösung benötigen, können Sie viel Zeit sparen, indem Sie ein Modal aus einer UI-Bibliothek wie Bootstrap verwenden.

Bootstrap 3 Modals in React

React-Bootstrap ist eine für React angepasste Version der beliebten Bibliothek. Es bietet benutzerdefinierte React-Komponenten mit denselben Funktionen und Funktionen, die Sie von der ursprünglichen Bootstrap-Version 3 erwarten würden.

Die Verwendung einer Bibliothek wie React-Bootstrap ermöglicht es Ihnen, gängige UI-Elemente zu verwenden, ohne sie von Grund auf neu zu schreiben.

Eine aus dieser Bibliothek importierte Modal-Komponente bietet alle Funktionen, die Sie benötigen. Sobald Sie es importiert haben, müssen Sie nicht mehr gegen Muster von React angehen und DOM direkt mutieren.

Sie können es installieren, indem Sie die Shell öffnen und den folgenden Befehl eingeben:

npm install react-bootstrap

Das Beste an der Bibliothek react-bootstrap ist, dass sie einzelne Komponenten separat importieren kann. Auf diese Weise können Sie die Paketgröße minimieren und das Laden Ihrer App beschleunigen.

Der einfachste Weg, ein Modal aus der React-Bootstrap-Bibliothek einzubinden, besteht darin, eine import-Anweisung am Anfang Ihrer Anwendung zu deklarieren:

import Modal from 'react-bootstrap/Modal';

Einziges Manko der Bibliothek React-Bootstrap ist, dass sie nur Bootstrap 3 unterstützt.

Die React-Bootstrap-Bibliothek gibt Ihnen viel Freiheit, das Aussehen und die Funktionalität der Modal-Komponente anzupassen. Sie können die Animation, die Position im Browser und die Größe anpassen, um nur einige zu nennen. Erfahren Sie mehr über React-Bootstrap-Modals, indem Sie die offizielle Anleitung lesen.

Bootstrap 4 & 5 Modals in React

Wenn Sie Bootstrap 4 oder die neuere Version 5 verwenden möchten, verwenden Sie am besten das Paket react-strap. Da dieses Paket keine Stile hat, müssen Sie das Kernpaket bootstrap installieren und seine CSS-Datei importieren.

Um das Paket react-strap zu installieren, müssen Sie die Kommandozeile öffnen und folgenden Code eingeben:

npm install reactstrap

Nach der Installation können Sie die Komponente Modal in Ihre Anwendung importieren. Hier ist ein Beispiel:

import React from 'react';
import { Modal } from 'reactstrap';

Die Komponente Modal wurde speziell für React entwickelt. Sie können sein Verhalten anpassen, indem Sie props wie isOpen, toggle und size verwenden. Sie können sogar die Fade-Animation aktivieren oder deaktivieren.

Das Paket react-strap lässt Ihnen viel Freiheit, das Verhalten seiner Komponenten anzupassen. Weitere Informationen zu den Ihnen zur Verfügung stehenden Optionen finden Sie in der offiziellen Dokumentation zu react-strap.