Erste Schritte mit React TimeAgo

Wenn Sie die relative Zeit aus der Vergangenheit in einer React-Anwendung anzeigen müssen.

Foto von Sonja Langford auf Unsplash

Die Anzeige der relativen Zeit auf Websites wird immer beliebter und ist für Endbenutzer bequemer. WhatsApp, YouTube, Facebook, Uber und wahrscheinlich die meisten Anwendungen, die Sie täglich verwenden, zeigen Datumsangaben in einem relativen Format an.

Relative Zeit auf WhatsApp
Relative Zeit auf YouTube
Relative Zeit bei Google

Welches Problem versucht die Bibliothek zu lösen?

Die Anzeige der relativen Zeit aus der Vergangenheit ist möglicherweise nicht so einfach, wie es auf den ersten Blick aussieht. Es gibt mehrere Randfälle und mehrere Fragen, die beantwortet werden müssen. Zum Beispiel, wie viele Tage hat ein Monat? Wie viele Tage, Monate oder Jahre ist der 22. 2. 2002 her? Wie oft muss die Komponente aktualisiert werden? Wie formatiere ich die Ausgabe?

Die Bibliothek versucht, all diese Probleme zu lösen, während sie dennoch klein ist.

Wie können Sie die Bibliothek nutzen?

Sie können die Bibliothek mit npm install react-timeagooder installieren yarn add react-timeago. Wenn Sie TypeScript verwenden, müssen Sie möglicherweise Typen manuell hinzufügen, indem Sie @types/react-timeagoAbhängigkeiten installieren .

Einfaches Code-Snippet-Beispiel
Das Ergebnis aus dem Conde-Schnipsel

Die TimeAgo-Komponente nimmt die Haupteigenschaft date, die das Datum sein muss, das Sie in einem relativen Format anzeigen möchten. Durch die Bereitstellung anderer Requisiten können Sie sogar die Art und Weise ändern, wie der Text angezeigt wird, und Sie können auch die Häufigkeit ändern, mit der die Komponente aktualisiert werden kann.

Sie können es auf diesem Spielplatz ausprobieren https://codesandbox.io/s/brave-hellman-t42wound die vollständige Dokumentation finden Sie im GitHub Repository .

Wann sollten Sie diese Bibliothek verwenden?

Diese Art von Edge-Case-Logik selbst zu implementieren kann zeitaufwändig und fehleranfällig sein. Es kann sinnvoll sein, die Bibliothek in Ihrem Projekt zu installieren, wenn Sie an einer Messaging-Anwendung, einer Tracking-Anwendung oder einer anderen Anwendung arbeiten, die mit Datumsangaben arbeitet und Sie möchten, dass Ihre Benutzer ein einfaches relatives Datum sehen. Einige Benutzer ziehen jedoch möglicherweise das absolute Datum dem relativen Datum vor, Sie können jedoch beide Datumsangaben anzeigen, wenn Sie sich nicht sicher sind, ob sie das bevorzugen, z. 14:38 (4 hours ago).

Fazit

React TimeAgo löst das Problem auf elegante Weise, wird getestet und wird mehr als 60.000 Mal pro Woche heruntergeladen, was die Bibliothek zuverlässig macht.

Suggested posts

Informationen zu Domänennamen finden

Ein Auszug aus Small, Sharp Software Tools von Brian P. Hogan

Informationen zu Domänennamen finden

Wenn Sie eine Anfrage an facebook.com stellen, sucht Ihr Computer nach dem Domänennamen, um diesen in eine IP-Adresse zu übersetzen, damit Ihr Computer diese Verbindung herstellen kann.

Die verheerenden Folgen eines Schlaganfalls vermeiden: Aus der Reise einer Familie lernen.

Die verheerenden Folgen eines Schlaganfalls vermeiden: Aus der Reise einer Familie lernen.

Einleitung Ein Schlaganfall ist ein medizinischer Notfall, der jeden jederzeit treffen kann. Sie tritt auf, wenn die Durchblutung eines Teils des Gehirns gestört ist, was zu einem plötzlichen Verlust der Gehirnfunktion führt.

Related posts

Die langsame Erosion: Enthüllung der Art und Weise, wie Menschen in ihrer Karriere verkümmern

Die langsame Erosion: Enthüllung der Art und Weise, wie Menschen in ihrer Karriere verkümmern

In der heutigen schnelllebigen und wettbewerbsintensiven Welt spielt die Karriere eine wichtige Rolle für das persönliche Wachstum, die finanzielle Stabilität und die allgemeine Lebenszufriedenheit. Viele Menschen befinden sich jedoch in einem unerbittlichen Kreislauf aus Stagnation und Unzufriedenheit, der ihr Berufsleben allmählich verkümmert.

Wie man den Planeten rettet und Geld verdient

Wie man den Planeten rettet und Geld verdient

Wie oft haben Sie ohne nachzudenken eine Plastikflasche, ein Glas, eine Aluminiumdose oder ein Öko-Energiepaket weggeworfen? Wie oft haben Sie sich gewünscht, dass Sie für das Recycling etwas zurückbekommen könnten? Wenn Sie wie die meisten Menschen sind, lautet die Antwort wahrscheinlich „vielfach“. Recycling wird oft als Ärger, lästige Pflicht oder Pflicht angesehen, die keinen unmittelbaren oder greifbaren Nutzen bringt.

Netzwerk-TV Twitter

Netzwerk-TV Twitter

Was alt ist, ist jetzt wieder neu und was früher das glitzernde, glänzende Ding war, fühlt sich jetzt langweilig an. Ich spreche nicht davon, dass JNCO-Jeans zusammen mit anderen Modetrends der späten 1990er Jahre unter den coolen Kids in der Innenstadt ein Comeback erleben.

Zeitschrift Ouvert

Zeitschrift Ouvert

Offenes Tagebuch: Ein Bild pro Tag. Geschichten haben mich schon immer fasziniert.