Kkwaenggwari · Open source

Kicsi a termete.Nagy a hangja.

Nyílt forráskódú állapot- és mozgáseszközök React és React Native alá. Három célzott csomag, amely az első importtól működik, és csak annyira nő, amennyire szüksége van.

  • 3 csomag
  • React · React Native
  • TypeScript-deklarációk
  • ISC-licenc

Üsse meg a gongot. Minden eszköz a maga módján felel a hangra.

01 · Az eszközök

Három hangszer.Egy ütem.

Mindegyik egyetlen feladatot végez el elejétől a végéig. Használja őket külön vagy együtt — úgy készültek, hogy illeszkedjenek.

restate

ÁllapotReact + React Native

Ossza meg egy hookkal.Mentse, amikor eldönti.

A komponensek Provider, action és reducer nélkül olvassák ugyanazt az értéket. Csak akkor renderelnek újra, ha a kiválasztott részük változik, a mentés és a helyreállítás pedig pontosan akkor történik, amikor kéri.

  • Megosztás Provider nélkül
  • Csak a kiválasztott részre iratkozik fel
  • Kifejezett mentés IndexedDB-be vagy MMKV-be
Telepítés
npm install @kkwaenggwari/restate

Élő

Két komponens, egy store

Nyomjon meg egy gombot bármelyik oldalon. Mindkét panel ugyanazt a restate() értéket olvassa, és együtt változik; a szállítási jelvény csak egy kiválasztott részt figyel.

Fejléc

2 a kosárban

Terméklista

2 a kosárban

Animated

MozgásmotorReact DOM

Egyetlen értékvezényli az egész képernyőt.

Használja React DOM-ban a React Native Animatedből ismert timinget, springet és interpolate-et. Egyetlen érték sok elem stílusát vezérli, képkockánkénti React-renderelés nélkül.

  • A React Native Animated API, amelyet már ismer
  • A megszakítás megőrzi a pozíciót és a sebességet
  • Kitakarít maga után, amikor a tulajdonosa megszűnik
Telepítés
npm install @kkwaenggwari/animated

Élő

Egy Value, tizenkét alakzat

A csúszka egyetlen Value-t módosít. Mind a tizenkét alakzat helyzete, forgása, mérete és sarka ebből származik. Nyomja meg a rugót, majd kapja el a csúszkát mozgás közben.

Animated Chorus

Kész komponensekReact · React Native

A nehéz interakciókmár elkészültek.

Pörgő számok, vándorló kiemelés, csak a változást mozgató listák, sheetek és csúsztatásos műveletek. Adja meg az adatait — provider és beállító hívás nélkül — React és React Native alatt.

  • Számok, fülek, listák és sheetek
  • Ugyanaz az import weben és natívan
  • Az új bemenet onnan folytatja, ami a képernyőn van
Telepítés
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

Élő

Irányítópult, amelynek csak adat kell

Válasszon időszakot: a MotionHighlight odaköltözik, a MotionNumber pörög, a ProgressRing feltöltődik, a MotionList pedig csak a változott sorokat mozgatja.

MaEzen a hétenEbben a hónapban

Látogatások

1,284

  1. Kezdőlap
  2. Árak
  3. Docs
  4. Blog

Mintaadat

02 · Együttes

Egy ütés.Minden megmozdul.

Ez a színpad Animateddel készült. Egyetlen, a görgetés előrehaladását tároló Value egyszerre vezényli 48 alakzat helyzetét, forgását, méretét és átlátszatlanságát.

  1. 01
    Zengés

    A szétszórt pontok egy gong gyűrűivé állnak össze.

  2. 02
    Szétválás

    A gyűrű három részre válik, és felveszi az egyes eszközök színét.

  3. 03
    Forma

    Az állapot kapcsolataivá, a mozgás pályájává és a kórus oszlopaivá válnak.

  4. 04
    Ütem

    Minden sorba áll, és ugyanarra az ütemre érkezik.

progress1.00

03 · Elvek

Kicsi,elejétől a végéig.

Kezdje egyetlen importtal

Nincs előzetes csomagoló provider vagy globális beállítás. Csak akkor adjon hozzá képességeket, amikor az alkalmazás kéri.

Csak ami szükséges

Csak azok a komponensek frissülnek, amelyek kiválasztása megváltozott, azok az elemek, amelyek egy értéket használnak, és azok a sorok, amelyek elmozdultak.

Felelős a végéig

A megszakított mozgás onnan folytatódik, ami a képernyőn van, a feliratkozások és animációk pedig felszabadulnak, amikor a tulajdonosuk megszűnik.

Típusos és dokumentált

Minden csomag TypeScript-deklarációkat tartalmaz, a dokumentáció pedig 39 nyelven olvasható.

04 · A név

Kkwaenggwari,a gong, amely elindítja a zenekart.

Ejtése: „kveng-gva-ri”. A koreai pungmulban a vezető kkwaenggwari (꽹과리) játékos adja meg az egész együttes ütemét. Eszközeink ugyanerre törekszenek: kicsik, de világosak, hogy az egész alkalmazás egy ütemre járjon.

kkwaenggwariA Kkwaenggwari nevét a kkwaenggwariról (꽹과리) kapta, egy kis koreai gongról, amelyet ütővel szólaltatnak meg. Fényes, tiszta hangja adta az ötletet ezeknek a kis nyílt forráskódú eszközöknek a nevéhez.