Open-Source-Werkzeuge für State und Animation in React und React Native. Drei fokussierte Pakete, die ab dem ersten Import funktionieren und nur so weit wachsen, wie du es brauchst.
Komponenten lesen denselben Wert ohne Provider, Actions oder Reducer. Sie rendern nur neu, wenn sich ihre Auswahl ändert, und Speichern oder Wiederherstellen passiert genau dann, wenn du es sagst.
Drück auf einer der beiden Seiten einen Button. Beide Panels lesen denselben restate()-Wert und ändern sich gemeinsam; das Versand-Badge hört nur auf eine Auswahl.
Nutze in React DOM die timing, spring und interpolate, die du aus React Native Animated kennst. Ein Wert steuert den Style vieler Elemente – ohne React-Render pro Frame.
Die React-Native-Animated-API, die du kennst
Unterbrechungen behalten Position und Geschwindigkeit
Der Slider ändert einen einzigen Value. Position, Drehung, Größe und Ecken aller zwölf Formen werden daraus abgeleitet. Drück auf die Feder und greif dann mitten in der Bewegung den Slider.
Rollende Zahlen, eine wandernde Hervorhebung, Listen, die nur das Geänderte bewegen, Sheets und Wisch-Aktionen. Übergib deine Daten – ohne Provider oder Setup-Aufruf – in React und React Native.
Zahlen, Tabs, Listen und Sheets
Derselbe Import im Web und nativ
Neue Eingaben setzen dort an, was auf dem Bildschirm ist
Wähle einen Zeitraum: MotionHighlight wandert dorthin, MotionNumber rollt, ProgressRing füllt sich und MotionList bewegt nur die Zeilen, die sich geändert haben.
HeuteDiese WocheDieser Monat
Besuche
1,284
Start
Preise
Doku
Blog
Beispieldaten
02 · Ensemble
Ein Schlag.Alles bewegt sich.
Diese Bühne ist mit Animated gebaut. Ein einziger Value mit deinem Scroll-Fortschritt dirigiert Position, Drehung, Skalierung und Deckkraft von 48 Formen gleichzeitig.
01
Klingen
Verstreute Punkte sammeln sich zu den Ringen eines Gongs.
02
Teilen
Der Ring teilt sich in drei und nimmt die Farbe jedes Werkzeugs an.
03
Formen
Sie werden zu den Verbindungen des States, der Bahn der Bewegung und den Säulen des Chors.
04
Takt
Alles richtet sich aus und landet auf demselben Schlag.
progress
03 · Prinzipien
Klein,von Anfang bis Ende.
Mit einem Import anfangen
Kein umhüllender Provider und keine globale Einrichtung vorab. Füge Funktionen erst hinzu, wenn deine App danach fragt.
Nur was es braucht
Aktualisiert werden nur Komponenten, deren Auswahl sich geändert hat, Elemente, die einen Wert nutzen, und Zeilen, die sich bewegt haben.
Verantwortung bis zum Schluss
Unterbrochene Bewegung setzt dort an, was auf dem Bildschirm ist, und Abonnements und Animationen werden freigegeben, wenn ihr Besitzer verschwindet.
Typisiert und dokumentiert
Jedes Paket bringt TypeScript-Deklarationen mit, und die Dokumentation gibt es in 39 Sprachen.
04 · Der Name
Kkwaenggwari,der Gong, der die Band anstimmt.
Gesprochen etwa „kwäng-gwa-ri“. Im koreanischen Pungmul gibt der vorderste Kkwaenggwari-Spieler (꽹과리) den Takt für das ganze Ensemble vor. Unsere Werkzeuge wollen dasselbe: klein, aber klar – damit deine ganze App im selben Takt bleibt.
kkwaenggwariKkwaenggwari ist nach dem Kkwaenggwari (꽹과리) benannt, einem kleinen koreanischen Gong, der mit einem Schlägel gespielt wird. Sein heller, klarer Klang hat den Namen dieser kleinen Open-Source-Werkzeuge inspiriert.
