Top 25 React Select-Komponentenbibliothek

Blog

Top 25 React Select-Komponentenbibliothek

1.Reagiere benutzerdefiniertes Flag Auswählen

Reagieren Sie benutzerdefinierte Flag-Auswahlkomponente .A reagieren Sie auf ein benutzerdefiniertes Flag (Ländercode).



Reagieren Benutzerdefinierte Flagge Auswählen

Online-Demo https://edwardfhsiao.github.io/react-custom-flag-select/



Auf GitHub ansehen

2.Reagieren Sie Kachel auswählen

Das Select-Steuerelement für Reagieren .



Demo ansehen Hier

Link zu CodeSandBox

Auswahlkachel reagieren

Auf GitHub ansehen

3.React Awesome Selector

Eine mit ReactJS erstellte Selektorkomponente. https://github.com/statebait/react-awesome-selector

Reagieren Sie Awesome Selector

Auf GitHub ansehen

4.Reagieren Sie die Funktionsauswahl

Mikrogroße & mikrooptimierte Select-Komponente für ReactJS.

Dieses Projekt wurde von React-Select inspiriert. Wenn Sie einige Funktionen benötigen, die nicht bereitgestellt werden, schlage ich vor, dieses Paket auszuprobieren.

Funktionale Auswahl reagieren

Hauptmerkmale:

  • Voll funktionsfähiges Paket, das wirklich leicht ist: ~7,85 KB (gzipped)!
  • Erweiterbare Styling-API mit gestylten Komponenten
  • Opt-in-Eigenschaften, um die Komponente vollständig zugänglich zu machen
  • Müheloses Scrollen, Filtern und Durchsuchen von Datensätzen mit Zehntausenden über das Reaktionsfenster + leistungsbewussten Code

Auf GitHub ansehen

5.Reagieren Sie slct

Select-Box basierend auf React- und Styled-Komponenten .Noch eine Select-Box basierend auf React-, Styled-Komponenten und Reaction-Fenster.

Reagiere slct

Merkmale

  • Einzelauswahl
  • Mehrfachauswahl
  • Durchsuchbar
  • löschbar
  • Deaktiviert (ganze Box oder einzelne Optionen)
  • In Einzel- und Mehrfachauswahl erstellbar
  • Automatische Menüposition (oben oder unten)
  • Anpassbare Komponenten
  • Native Unterstützung (z.B. auf mobilen Geräten)
  • Volle Tastatur-Unterstützung inkl. TAB-Verhalten
  • Automatische Auswahl von Optionen in nicht durchsuchbarem Feld über Tastatureingabe
  • Verwendet React Portals zum Rendern von Menüs
  • 100% Typoskript
  • Unterstützt den Headless-Modus, um die volle Kontrolle darüber zu erhalten, was gerendert wird.

Auf GitHub ansehen

6.Kontextauswahl verwenden

React Context and useContext wird häufig verwendet, um das Bohren von Stützen zu vermeiden, es ist jedoch bekannt, dass es ein Leistungsproblem gibt. Wenn ein Kontextwert geändert wird, werden alle Komponenten, die Context verwenden, neu gerendert.

useContextSelector wird vor kurzem vorgeschlagen. Während Sie auf den Prozess warten, stellt diese Bibliothek die API im Userland bereit.

Kontextauswahl verwenden

Auf GitHub ansehen

7.Auswählbare Elemente für React

Eine Komponente für Reagieren, die die Mausauswahl untergeordneter Elemente ermöglicht. Ermöglicht die Einzel- oder Gruppenauswahl von Elementen mit der Maus.

Auswählbare Elemente für React

Demo http://unclecheese.github.io/react-selectable/example

Auf GitHub ansehen

8.Reaktionszielzeit

Komponente für ausgewählte Stunde in der Woche
Reagieren-Soll-Zeit Komponente für ausgewählte Zeit in der Woche

Merkmale

  • i18n

Zielzeit reagieren

Auf GitHub ansehen

9. Auswahl reagieren

Eine Bibliothek zum Zeichnen interaktiver Auswahlen, die für Reaktionsanwendungen geschrieben wurde. Dies ist eine Bibliothek, die eine Reihe von Werkzeugen zum Zeichnen von Regionen mit dem Cursor bereitstellt.

Auswahl reagieren

Auf GitHub ansehen

10.Reagieren Sie das Dreifachauswahlfeld

Eine einfache, Abhängigkeitsfreie und dumme Reaktionskomponente zum Rendern von Triple-Select-Boxen. Seit Version 2.0.0 ist React v16.8 oder höher erforderlich.

Dreifach-Auswahlbox reagieren

Auf GitHub ansehen

Cash-App zu Ihrem Schutz gekündigt

11.Reagieren Sie Select Plus

Eine Abzweigung von JedWatson/React-Select mit Unterstützung für Optionsgruppen.
Reagieren Sie Select Plus

Diese Gabel wird nicht mehr aktiv gewartet. Der Hauptzweck dieses Projekts bestand darin, die Unterstützung von Optionsgruppen für React-Select hinzuzufügen, eine Funktion, die im kommenden React-Select 2.0 unterstützt wird. Eine weitere Alternative, die es wert ist, ausprobiert zu werden, ist das Herunterschalten, das Low-Level-Bausteine ​​zum Erstellen benutzerdefinierter Dropdown-Komponenten bereitstellt.

Demo & Beispiele
Live-Demo: http://github.hubspot.com/react-select-plus/

Auf GitHub ansehen

12.Reagieren Sie asynchrone Auswahl

Asynchrone Dropdown-Komponente mit erweiterter modaler Suche. Diese Komponente ist eine Kombination aus einer Combobox mit asynchronem Abrufen von Ergebnissen und einem modalen Suchdialog für mehr Filtermöglichkeiten.
Reagieren Sie asynchrone Auswahl

Live-Demo: https://opuscapita.github.io/react-async-select/

Auf GitHub ansehen

13. Dropdown-Auswahl reagieren

Anpassbare Dropdown-Auswahl für Reagieren.
Dropdown-Auswahl reagieren

Merkmale

  • konfigurierbar über Requisiten
  • Gesamtzahl benutzerdefinierter Komponentenüberschreibungen für alle Interna über Render-Prop-Callbacks (mit Zugriff auf interne Requisiten, Status und Methoden)
  • per CSS (oder benutzerdefinierten Komponenten) gestaltbar
  • Portalunterstützung für das Rendering-Dropdown außerhalb des lokalen DOM-Baums. z.B. in document.body
  • Autoposition
  • kleine Bündelgröße

Live-Demo: https://sanusart.github.io/react-dropdown-select/

Auf GitHub ansehen

14.Reaktionsliste auswählen

Eine Liste mit auswählbaren und per Tastatur navigierbaren Elementen. Nützlich als Dropdown (automatische Vervollständigung), Rechtsklickmenü oder eine einfache Liste mit Aktionen, die bei der Elementauswahl ausgelöst werden.
Auswahl der Reaktionsliste

Sieh den Beispiel .

Auf GitHub ansehen

15.Reagiere benutzerdefinierte Flag-Auswahl

Eine benutzerdefinierte Reaktionsflagge (Ländercode) auswählen.
Benutzerdefinierte Flaggenauswahl reagieren

Online-Demo
Live-Demo

Codesandbox-Beispiele
Live-Demo-Spielplatz

Auf GitHub ansehen

16. Auswahl des Dropdown-Baums reagieren

Leichte, zugängliche, anpassbare und schnelle Dropdown-Baumauswahl-Komponente für React.Ein leichtes und schnelles Steuerelement zum Rendern einer ausgewählten Komponente, die hierarchische Baumdaten anzeigen kann. Darüber hinaus zeigt das Steuerelement die Auswahl in Pillen an und ermöglicht dem Benutzer, die Optionen zum schnellen Filtern und Auswählen zu durchsuchen. Unterstützt auch die Anzeige teilweise ausgewählter Knoten

Reagieren Sie in der Dropdown-Baumauswahl

Demo
Vanille, kein Rahmen
Online-Demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-vanilla-styles

Mit Bootstrap
Online-Demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles

Mit Materialdesign
Online-Demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/with-material-design-styles

Als Einzelauswahl
Online-Demo: https://dowjones.github.io/react-dropdown-tree-select/#/story/simple-select

Auf GitHub ansehen

robloxplayer.exe, um das roblox-Installationsprogramm auszuführen

17.React Range Selector

Unterstützung Auswahlbereich zwischen von Punkt und zu Punkt.

Der HTML5-Eingabebereich unterstützt nur einen Punkt und ist für Mobilgeräte nicht einfach zu verwenden. Dieses npm-Paket ist eine alternative Lösung mit Eingabe-Checkbox.

Reaktionsbereichsauswahl

Merkmale

  • beyogen auf GUT
  • hat 'ist-Start'-Klasse, In-Range- und Is-End-Klasse für spezielles Styling-Set
  • Unterstützung des anfänglich ausgewählten Bereichs
  • unterstützung anpassen bereich
  • eigenständig reagieren Plugin mit Optionen für Ihren schnellen Prototyp, Überprüfen Sie die Demo

Demo
Auf GitHub ansehen

18.Reagiere, wähle mich aus

Eine hoch skalierbare Dropdown-Liste für Reaktionen.

Reagiere wähle mich aus

Demo

Auf GitHub ansehen

19. Fuzzy-Picker reagieren

Eine React-Komponente, die einen Fuzzy-Picker implementiert (ähnlich der Befehlspalette von Sublime Text oder dem Channel-Switcher von Slack). Kurz gesagt, es bietet dem Benutzer eine schnelle Möglichkeit, aus einer langen Liste von Elementen auszuwählen.

Fuzzy-Picker reagieren

React-Komponente, die einen Fuzzy-Picker implementiert (wie die Befehlspalette von Sublime Text oder den Channel-Switcher von Slack).

Live-Demo: https://1egoman.github.io/fuzzy-picker

Auf GitHub ansehen

20.itsa reagieren auswählen

Schöne Auswahl zum Reagieren.

Leicht, fokussierbar und reagiert auf die Tastatur.
ita reagieren auswählen

Auf GitHub ansehen

21.Verfügbare Zeiten reagieren

Eine React-Komponente, die es einem Benutzer ermöglicht, Zeitfenster in einer kalenderähnlichen Benutzeroberfläche auszuwählen.

Verfügbare Zeiten reagieren

Auf GitHub ansehen

22.Reagieren Auswahl aktiviert

A Reagieren Sie die ausgewählte Komponente basierend auf JedWatson/React-Select mit Häkchen bei ausgewählten Optionen.
Reagieren Wählen Sie ein Häkchen

Auf GitHub ansehen

23.React Flags auswählen

Ein anpassbares SVG-Flags ausgewählte Komponenten für React Js.
Reaktionsflaggen auswählen

Demo und Beispiel
Live-Demo: https://ekwonye-richard.github.io/react-flags-select/

Auf GitHub ansehen

24.Reagieren Sie gestylte Auswahl

Ein mit Reactjs erstelltes Select-Steuerelement, gestylte Komponenten.
Reagieren Sie gestylt auswählen

Aktuell mit React/React-Dom 16.2.0

ACHTUNG: In Arbeit (sorry!)
Dieses Projekt wurde mit gestylten Komponenten erstellt und ist eine Neuinterpretation des großartigen Projekts reagieren-wählen . Aber was sind die Unterschiede zwischen React-Select und diesem Projekt?

  • Leicht!
  • Es zwingt Sie nicht, externes CSS zu laden.
  • Funktioniert mit dem CSS-Module-Konzept und nicht mit globalen Klassennamen. Hier hat eine gute Diskussion über dieses Problem (hier).
  • CSS-Variablen : Sehr einfach an Ihre Bedürfnisse anzupassen.
  • Schatten-DOM: Wenn Sie Probleme mit global stilisierten Eingabefeldern haben oder hatten, können Sie Ihre Komponente mit dieser großartigen Funktion kapseln.

Auf GitHub ansehen

25.Noch ein weiteres React-Multiselect

Noch ein React-Multiselect. Mit Checkbox-Unterstützung anstelle von Tags. Beim Umgang mit mittellangen Auswahllisten, insbesondere Mehrfachauswahllisten. Der gängige Ansatz besteht darin, Tags zu verwenden, z.

Noch ein React-Multiselect

Auf GitHub ansehen

#reactjs #javascript