Kkwaenggwari · Open source

Mały.Brzmi głośno.

Narzędzia open source do stanu i animacji dla React i React Native. Trzy wyspecjalizowane pakiety, które działają od pierwszego importu i rosną tylko tak bardzo, jak potrzebujesz.

  • 3 pakiety
  • React · React Native
  • Deklaracje TypeScript
  • Licencja ISC

Uderz w gong. Każde narzędzie odpowiada na dźwięk na swój sposób.

01 · Narzędzia

Trzy instrumenty.Jeden rytm.

Każde wykonuje jedno zadanie, od początku do końca. Używaj ich osobno albo razem — zostały zrobione tak, by do siebie pasowały.

restate

StanReact + React Native

Udostępnij jednym hookiem.Zapisz, kiedy zdecydujesz.

Komponenty odczytują tę samą wartość bez Providera, akcji i reducerów. Renderują się ponownie tylko wtedy, gdy zmienia się ich wybór, a zapis i przywracanie dzieją się dokładnie wtedy, gdy powiesz.

  • Wspólny stan bez Providera
  • Subskrybuj tylko wybraną część
  • Jawny zapis do IndexedDB lub MMKV
Instalacja
npm install @kkwaenggwari/restate

Na żywo

Dwa komponenty, jeden magazyn

Naciśnij przycisk po dowolnej stronie. Oba panele odczytują tę samą wartość restate() i zmieniają się razem; plakietka wysyłki słucha tylko jednego wyboru.

Nagłówek

2 w koszyku

Lista produktów

2 w koszyku

Animated

Silnik animacjiReact DOM

Jedna wartośćdyryguje całym ekranem.

Używaj w React DOM znanych z React Native Animated timing, spring i interpolate. Jedna wartość steruje stylem wielu elementów bez renderu React w każdej klatce.

  • Znane API React Native Animated
  • Przerwanie zachowuje pozycję i prędkość
  • Sprząta, gdy znika jego właściciel
Instalacja
npm install @kkwaenggwari/animated

Na żywo

Jedno Value, dwanaście kształtów

Suwak zmienia jedno Value. Pozycja, obrót, rozmiar i narożniki wszystkich dwunastu kształtów wynikają z niego. Naciśnij sprężynę, a potem złap suwak w połowie ruchu.

Animated Chorus

Gotowe komponentyReact · React Native

Trudne interakcje,już gotowe.

Przewijane liczby, wędrujące wyróżnienie, listy, które przesuwają tylko to, co się zmieniło, arkusze i akcje przesunięciem. Przekaż swoje dane — bez providera i wywołań konfiguracji — w React i React Native.

  • Liczby, karty, listy i arkusze
  • Ten sam import w sieci i w aplikacjach natywnych
  • Nowe dane wejściowe kontynuują od tego, co na ekranie
Instalacja
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

Na żywo

Panel, który potrzebuje tylko danych

Wybierz okres: MotionHighlight przesuwa się do niego, MotionNumber się przewija, ProgressRing się wypełnia, a MotionList przesuwa tylko zmienione wiersze.

DziśTen tydzieńTen miesiąc

Odwiedziny

1,284

  1. Start
  2. Cennik
  3. Docs
  4. Blog

Przykładowe dane

02 · Zespół

Jedno uderzenie.Wszystko w ruchu.

Ta scena jest zbudowana z Animated. Jedno Value z postępem przewijania dyryguje naraz pozycją, obrotem, skalą i przezroczystością 48 kształtów.

  1. 01
    Dźwięk

    Rozproszone punkty zbierają się w pierścienie gongu.

  2. 02
    Podział

    Pierścień dzieli się na trzy i przyjmuje kolor każdego narzędzia.

  3. 03
    Kształt

    Stają się połączeniami stanu, trajektorią ruchu i filarami chóru.

  4. 04
    Rytm

    Wszystko się ustawia i trafia w to samo uderzenie.

progress1.00

03 · Zasady

Małyod początku do końca.

Zacznij od jednego importu

Żadnego otaczającego providera ani globalnej konfiguracji na start. Dodawaj możliwości dopiero, gdy aplikacja ich potrzebuje.

Tylko to, co trzeba

Aktualizowane są tylko komponenty, których wybór się zmienił, elementy używające wartości i wiersze, które się przesunęły.

Odpowiedzialny do końca

Przerwany ruch kontynuuje od tego, co na ekranie, a subskrypcje i animacje są zwalniane, gdy znika ich właściciel.

Typowany i udokumentowany

Każdy pakiet zawiera deklaracje TypeScript, a dokumentacja jest dostępna w 39 językach.

04 · Nazwa

Kkwaenggwari —gong, który prowadzi zespół.

Wymawia się „kkwen-gwa-ri”. W koreańskim pungmul prowadzący gracz na kkwaenggwari (꽹과리) wyznacza rytm całemu zespołowi. Nasze narzędzia dążą do tego samego: małe, ale wyraźne, by cała aplikacja grała w jednym rytmie.

kkwaenggwariNazwa Kkwaenggwari pochodzi od kkwaenggwari (꽹과리) — małego koreańskiego gongu, w który uderza się pałką. Jego jasny, czysty dźwięk podsunął nazwę tym małym narzędziom open source.