20 Möglichkeiten, modale Dialogkomponenten zu erstellen

Blog

20 Möglichkeiten, modale Dialogkomponenten zu erstellen

20 Möglichkeiten, modale Dialogkomponenten zu erstellen

1. Reagieren Sie Overlay-Paket

Wiederverwendbare Komponenten zum Erstellen von Tooltip, Popover und Dialog.

Überlagerungspaket reagieren

Auf Github ansehen

2. Reagiere auf Poppop

Eine reaktionsschnelle, mobile Unterstützung, mehrere Richtungen und ein einfach zu verwendendes Modal für ReactJS.

Merkmale

Visa-Bereitstellungsservice uns
  • Mobiler Support — Reaktionsschnelles und unterstützendes Tippen.
  • Mehrere Richtungen — 9 Positionen unterstützen. ↑ ↗ ︎→ ↘ ︎↓ ↙ ︎← ↖ ︎⥁
  • Stil einfach anpassen
  • React v16-Portal — Verwenden der offiziellen Portal-API von React v16. Auch abwärtskompatibel mit v15

Reagiere Poppop

Auf Github ansehen

3. Reagiere fantastisch Modal

Dies ist ein anpassbares Modal.

Reagiere fantastisch Modal

Auf Github ansehen

4. Reagieren Bestätigen

Kleine Bibliothek, die Ihre Dialog-Komponente aufrufbar macht.

Diese Bibliothek stellt keine Ansichtskomponente bereit. Fügt einfach eine aufrufbare Funktionalität wie window.confirm hinzu.

Im Beispiel werden React-Bootstrap und Material-UI mit verwendet.

Reagieren Bestätigen

Auf Github ansehen

5. Reagiere Bootstrap Sweetalert

Eine React-Implementierung von SweetAlert

React Bootstrap Sweetalert

pip3 install git+https://github.com/rapptz/discord.py@async

Auf Github ansehen

6. Portale reagieren

Meinungslose React-Bibliothek zum Rendern von Inhalten an einer anderen Stelle des React-Baums (ohne den React-Kontext zu verlieren). Dies ist besonders nützlich für Modals oder Popovers.

Reaktionsportale

Vorteile

  • Bauen Sie Ihre eigenen Portale und Portalziele für Ihre eigenen Bedürfnisse mit den bereitgestellten höherwertigen Komponenten
  • Entscheiden Sie, wo Ihr mit Portal versehener Inhalt gerendert werden soll, indem Sie das Portal-Ziel an einer beliebigen Stelle in Ihrem React-Baum platzieren.
  • Behalten Sie Ihren Kontext! React-Router oder React-Redux verwenden den React-Kontext, um die Kommunikation zwischen Komponenten zu ermöglichen. Dies funktioniert nicht mit herkömmlichen Modal- oder Portalbibliotheken, da sie Ihre Komponenten in einen anderen React-Root (oft in document.body) rendern.

Demo: https://andreasgruenh.github.io/react-portals-example/

Auf Github ansehen

7. Reagiere auf reines Modal

React Pure Modal ist die einfachste Möglichkeit, einen Dialog auf Ihrer Website zu erstellen.

  • Sehr klein (weniger als 4 KB)
  • Handyfreundlich
  • Ohne Abhängigkeiten

Reagiere reines Modal

Auf Github ansehen

8. Reaktionsschnelles Modal

Ein einfaches, reaktionsschnelles und zugängliches Reaktions-Modal, das mit React 16 kompatibel und bereit für React 17 ist.

  • Fokusfalle im Modal.
  • Zentrierte Modalitäten.
  • Scrollende Modalitäten.
  • Mehrere Modalitäten.
  • Leicht anpassbar über Requisiten.

Reaktionsschnelles Modal

Auf Github ansehen

9. React Redux Modal Flex

Machen Sie einfach ein Modal/Popup mit Redux.

React Redux Modal Flex

Merkmale

  • Responsiv
  • Einfacher benutzerdefinierter Animationseffekt von Animate.css

Demo: https://react-redux-modal-flex.surge.sh/

Auf Github ansehen

10. Reaktionsportal

React-Komponente für den Transport von Modal, Leuchtkästen, Ladebalken… zum document.body o.ä.

Merkmale

  • Verwendet React v16 und seine offizielle API zum Erstellen von Portalen
  • Hat einen Fallback für React v15
  • Transportiert seine Kinder in ein neues React Portal, das standardmäßig an . angehängt wird document.body
  • Kann benutzerdefiniertes DOM-Element als Ziel verwenden
  • Unterstützt serverseitiges Rendering
  • Unterstützt zurückgebende Arrays (keine Wrapper-Divs erforderlich)
  • |_+_| und |_+_| Es gibt also keine Kompromisse zwischen Flexibilität und Komfort
  • Erzeugt kein DOM-Chaos
  • Bietet bei ESC schließen und bei äußerem Mausklick schließen aus der Box
  • Verlass dich nicht , minimalistisch

Auf Github ansehen

11. Reagieren Sie Bootstrap bestätigen

Bestätigen Sie den Dialog, um mit Bootstrap Modal zu reagieren.

Reagieren Sie Bootstrap bestätigen

Auf Github ansehen

Hay Day Diamanten Generator

12. Mittleren Bildzoom reagieren

Diese Bibliothek ist eine andere Implementierung von Medium.com 's Bildzoom, der es ermöglicht, dass Bilder mit niedriger und hoher Auflösung für Zoomeffekte zusammenarbeiten und unabhängig von übergeordneten Elementen mit Überlauf funktionieren: ausgeblendet oder übergeordnete Elemente mit Transformationseigenschaften. Versionen >=3.0.0 sind kompatibel mit React.js >=16.x; wenn Sie Kompatibilität mit React@^0.14.0 || . benötigen ^15.0.0, bitte verwenden Sie Version 2.x.

Mittleren Bildzoom reagieren

Demo: https://rpearce.github.io/react-medium-image-zoom/

Auf Github ansehen

13. Modal reagieren

Modale Dialogfelder werden verwendet, um eine Antwort von einem Benutzer zu erhalten, bevor andere Funktionen von der Hauptseite aus bewertet werden können.

Modal reagieren

Demo : https://trendmicro-frontend.github.io/react-modal/

Auf Github ansehen

14. Modales Login reagieren

Login-modale Komponente, die mit React erstellt wurde. Neben den traditionellen Anmelde- und Anmeldeformularen können Sie unsere vorkonfigurierten Social Login-Buttons verwenden. In der aktuellen Version bieten wir eine Unterstützung für Facebook und Google an.

Da wir beabsichtigen, das Modul auf Entwickler auszurichten, haben wir uns entschieden, größere Anpassungsoptionen anzubieten. Dies erfordert, dass einige Funktionen in einer übergeordneten Komponente erstellt werden. Mach dir aber keine Sorgen. Wir werden dieses Thema in diesem Handbuch weiter behandeln.

Modales Login reagieren

Demo: https://developers.thebeaverhead.com/react-modal-login

Auf Github ansehen

15. Bootstrap-Dialog reagieren

Es ist eine Modal-Dialog React-Komponente, die auf Modal in React-Bootstrap basiert. Sie ist konfigurierbar und einfach zu verwenden anstelle von window.alert oder window.confirm in Ihrer React-Anwendung.

Bootstrap-Dialog reagieren

Demo

Auf Github ansehen

16. Reagiere Arie Modal

Ein vollständig zugängliches und flexibles React-Modal, das gemäß den WAI-ARIA-Autorenpraktiken entwickelt wurde.

Reagiere Arie Modal

Demo: https://davidtheclark.github.io/react-aria-modal/demo/

laravel machen:auth

Auf Github ansehen

17. Rodal

Ein React-Modal mit Animationen.

Rodal

Demo: https://chenjiahan.github.io/rodal/

Krypto-Preis für Kettenspiele

Auf Github ansehen

18. Bilder reagieren

Eine einfache, reaktionsschnelle Lightbox-Komponente für ReactJS, um ein Array von Bildern anzuzeigen.

Fotos mit freundlicher Genehmigung von Unsplash. Verwenden Sie Ihre Tastatur, um nach links und rechts zu navigieren. Versuchen Sie auch, die Größe Ihres Browserfensters zu ändern.

Bilder reagieren

Demo: https://jossmac.github.io/react-images/

19. Modale Box reagieren

React Modal Box ist eine einfache, abhängigkeitsfreie und anpassbare React-Komponente, um Modals in Ihrer Anwendung anzuzeigen. Sein einfaches Ereignissystem ermöglicht es Ihnen, das Modal in der Root-Komponente Ihrer Anwendung zu platzieren und es mit den einfachen Mixins aufzurufen, ermöglicht Ihnen, flexibel zu sein. Es enthält auch Event-Handling-Mixins, damit Sie erkennen können, wann das Modal aufgerufen oder ausgeblendet wird.

Demo

Auf Github ansehen

20. Dock reagieren

Veränderbare andockbare Reaktionskomponente.

Reaktionsdock

Demo: https://alexkuz.github.io/react-dock/demo/

Auf Github ansehen

#reactjs #javascript #programmierung