Wie wir React Carousel gebaut haben [Eine schrittweise Anleitung]

Einführung

Bei Brainhub verwenden wir größtenteils React JS, um unsere Benutzeroberflächen zu erstellen.

Die wachsende Größe des Ökosystems der Bibliothek bietet React-Entwickler eine größere Vielfalt vorhandener Open-Source-Komponenten. Darüber hinaus dank der Modularität von React und dem Fokus auf die Wiederverwendbarkeit von Komponenten, wir können Komponenten zwischen verschiedenen Projekten verwenden.

Karussellkomponenten sind in vielen Anwendungen unverzichtbar, und das ist kein Wunder — sie eignen sich hervorragend, um den Fokus auf Bilder zu lenken, ohne den Benutzer zu überfordern oder die Seite zu überladen. Leider bereits vorhanden React-Karussell Komponenten hatten Probleme, die sie für unsere Zwecke ungeeignet machten.

Dies führte dazu, dass im Grunde bei jedem Projekt das Rad neu erfunden und ein Karussell von Grund auf neu gebaut werden musste oder minderwertige Lösungen für ein relativ einfaches Problem verwendet wurden.

Wir bauen unser eigenes React-Karussell

Wir wollten ein React-Karussell, das nicht von großen externen Bibliotheken (wie jQuery) abhängt und erweiterbar und leicht.

Außerdem musste es so anpassbar sein, dass es an die große Anzahl von Anwendungen, an denen wir gearbeitet haben, angepasst werden kann, aber gleichzeitig sofort einsatzbereit genug ist, sodass wir uns keine Gedanken darüber machen mussten, das Rad neu zu erfinden.

Da wir im bestehenden Ökosystem kein solches React-Karussell finden konnten, beschlossen wir, unser eigenes zu erstellen.

Die Hauptziele beim Bau von React-Carousel waren:

• Vermeiden Sie die Verwendung externer Bibliotheken — wir haben uns darauf konzentriert, das Karussell so leicht und schnell wie möglich zu machen (zum Zeitpunkt des Schreibens ist es nur 11 KB gzipped).
• Ermöglichen Sie maximale Steckbarkeit — wir möchten, dass der Benutzer vorhandene Teile des Karussells problemlos austauschen kann, wenn er dies wünscht.
• Geben Sie sinnvolle Standardwerte an — unser React-Karussell sollte sofort einsatzbereit und praktisch sein.

Komplexität managen

Der Kern von React-Carousel befasst sich ausschließlich mit der Kontrolle dessen, was sich darin befindet. Das heißt, im Wesentlichen kann alles, was Sie sehen — Bilder, Pfeile — ausgetauscht werden benutzerdefinierte Komponenten und verknüpft mit dem Karussell mit minimaler Aufwand.

Dies ist der gesamte Code, der das React-Karussell im obigen GIF antreibt.

Sie werden feststellen, dass das React-Karussell einfach funktioniert, indem Sie eine beliebige Anzahl von React-Komponenten in eine „Karussell“ -Komponente packen. „Carousel“ selbst benötigt eine Reihe von Requisiten, die sich mit seinem Verhalten befassen (die vollständige Liste der verfügbaren Optionen findest du in der Dokumente).

Ein übliches Entwurfsmuster in React-Carousel besteht darin, APIs mit unterschiedlichen Komplexitätsgraden bereitzustellen, je nachdem, wie viele Anpassungen erforderlich sind. Wenn der Benutzer beispielsweise einem neu erstellten bloßen Karussell Pfeile hinzufügen möchte, kann er oder sie das hinzufügen boolesch Pfeil-Requisite, die die Standardpfeile rendert.

Wenn jedoch ein höheres Maß an Anpassung gewünscht wird, kann der Benutzer stattdessen die Requisiten ArrowLeft und ArrowRight hinzufügen. Jeder von ihnen benötigt eine React-Komponente, die das Aussehen der Pfeile bestimmt.

Abgesehen von den Pfeilen gibt es noch viele weitere Aspekte des Karussells, die auf diese Weise geändert werden können — wie zum Beispiel Punkte, die die Position des Karussell, Miniaturansichten, Ziehbarkeit, Anzahl der Karussellfolien pro Seite und mehr.

Kontrolliertes Bauteil

Eine weitere hilfreiche Eigenschaft von React-Carousel ist, dass Sie es als vollständig gesteuerte Komponente verwenden können — das heißt, Sie können steuern Sie es von der übergeordneten Komponente aus durch Requisiten und nicht nur durch Benutzereingaben.

Das bedeutet, dass Sie die volle Leistung von React nutzen können, um von anderen Stellen in Ihrer App aus damit zu interagieren oder es bei Bedarf mit anderen React-Bibliotheken wie Redux zu koppeln, um Ihr Karussell noch leistungsfähiger zu machen.

Natürlich mit dem Karussell als gesteuerte Komponente ist völlig optional und du kannst immer noch ein paar Folien ohne Requisiten darauf werfen und es wird trotzdem funktionieren.

React-Karussell unter der Motorhaube

React-Carousel bietet dem Benutzer nicht nur viele Anpassungsmöglichkeiten, sondern bietet auch mehrere Funktionen, die eine gute Leistung und Benutzerfreundlichkeit von Anfang an gewährleisten.

Zunächst wird die gesamte Bewegung im Karussell mithilfe von Smooth implementiert CSS-Animationen. Wir geben uns viel Mühe, um sicherzustellen, dass wir Sonderfälle abdecken und beim guten Aussehen keine Kompromisse eingehen. Ereignisse wie das Scrollen durch mehrere Folien werden so gestaltet, dass sie beeindruckend aussehen.

Darüber hinaus haben wir dafür gesorgt, dass das Karussell voll ansprechbar und rendert gut jedes Gerät und jeder Bildschirm Größe. Das Karussell passt sich immer an die größte verfügbare Breite an und sieht auf Handy, Tablet und Desktop großartig aus. Dies wird durch eine reibungslose Touch-Steuerung ergänzt.

Zusammenfassung

Wir sind uns ziemlich sicher, dass dies das beste verfügbare React-Karussell ist, aber glauben Sie uns nicht beim Wort. Schauen Sie es sich gerne selbst an GitHub und lassen Sie uns wissen, wie es für Sie funktioniert.