Open Source

Kkwaenggwari · Open source

Boyu küçük.Sesi gür.

React ve React Native için açık kaynak durum ve hareket araçları. İlk import'tan itibaren çalışan ve yalnızca ihtiyaç duyduğunuz kadar büyüyen, odaklı üç paket.

Araçları keşfedin GitHub
  • 3 paket
  • React · React Native
  • TypeScript bildirimleri
  • ISC lisansı

Gonga vurun. Her araç tınıya kendi yoluyla karşılık verir.

01 · Araçlar

Üç çalgı.Tek ritim.

Her biri tek bir işi baştan sona yapar. Tek başına ya da birlikte kullanın — birbirine uyacak şekilde yapıldılar.

restate

DurumReact + React Native

Tek hook ile paylaşın.Karar verdiğinizde kaydedin.

Bileşenler aynı değeri Provider, action veya reducer olmadan okur. Yalnızca seçtikleri kısım değiştiğinde yeniden render edilirler; kaydetme ve geri yükleme tam istediğiniz anda olur.

  • Provider olmadan paylaşılır
  • Yalnızca seçtiğiniz kısma abone olun
  • IndexedDB ya da MMKV'ye açık kayıt
Kurulum
npm install @kkwaenggwari/restate
Siteyi aç Kaynağı görüntüle

Canlı

İki bileşen, tek store

İki taraftaki düğmelerden birine basın. İki panel de aynı restate() değerini okur ve birlikte değişir; kargo rozeti yalnızca bir seçimi dinler.

Üst bilgi

2 sepette

Ürün listesi

2 sepette

Animated

Hareket motoruReact DOM

Tek değertüm ekranı yönetir.

React Native Animated'dan tanıdığınız timing, spring ve interpolate'i React DOM'da kullanın. Tek değer birçok öğenin stilini yönetir; her karede React render'ı olmadan.

  • Bildiğiniz React Native Animated API'si
  • Kesintiler konumu ve hızı korur
  • Sahibi gidince arkasını toplar
Kurulum
npm install @kkwaenggwari/animated
Siteyi aç Kaynağı görüntüle

Canlı

Tek Value, on iki şekil

Kaydırıcı tek bir Value'yu değiştirir. On iki şeklin konumu, dönüşü, boyutu ve köşeleri ondan türetilir. Yaya basın, sonra hareketin ortasında kaydırıcıyı yakalayın.

Animated Chorus

Hazır bileşenlerReact · React Native

Zor etkileşimler,hazır hâlde.

Dönen sayılar, yer değiştiren bir vurgu, yalnızca değişeni hareket ettiren listeler, sheet'ler ve kaydırma eylemleri. Verinizi verin — provider ya da kurulum çağrısı yok — React ve React Native'de.

  • Sayılar, sekmeler, listeler ve sheet'ler
  • Web'de ve native'de aynı import
  • Yeni girdi ekranda olandan devam eder
Kurulum
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated
Siteyi aç Kaynağı görüntüle

Canlı

Yalnızca veri isteyen bir pano

Bir dönem seçin: MotionHighlight oraya kayar, MotionNumber döner, ProgressRing dolar ve MotionList yalnızca değişen satırları kaydırır.

BugünBu haftaBu ay

Ziyaret

1,284

  1. Ana sayfa
  2. Fiyatlar
  3. Docs
  4. Blog

Örnek veri

02 · Topluluk

Tek vuruş.Her şey hareketlenir.

Bu sahne Animated ile yapıldı. Kaydırma ilerlemenizi tutan tek bir Value, 48 şeklin konumunu, dönüşünü, ölçeğini ve opaklığını aynı anda yönetir.

  1. 01
    Tını

    Dağınık noktalar gongun halkalarında toplanır.

  2. 02
    Bölünme

    Halka üçe ayrılır ve her aracın rengini alır.

  3. 03
    Şekil

    Durumun bağlantıları, hareketin yörüngesi ve koronun sütunları olurlar.

  4. 04
    Ritim

    Her şey hizalanır ve aynı vuruşa oturur.

progress1.00

03 · İlkeler

Küçük,baştan sona.

Tek import ile başlayın

Önceden saran bir provider ya da genel kurulum yok. Yetenekleri yalnızca uygulamanız istediğinde ekleyin.

Yalnızca gereken

Yalnızca seçimi değişen bileşenler, bir değeri kullanan öğeler ve yer değiştiren satırlar güncellenir.

Sonuna kadar sorumlu

Kesintiye uğrayan hareket ekranda olandan devam eder; abonelikler ve animasyonlar sahibi gidince bırakılır.

Tipli ve belgelenmiş

Her paket TypeScript bildirimleriyle gelir ve belgeler 39 dilde okunabilir.

04 · Ad

Kkwaenggwari,grubu başlatan gong.

"Kveng-gva-ri" diye okunur. Kore pungmul müziğinde baştaki kkwaenggwari (꽹과리) çalgıcısı tüm topluluğun ritmini belirler. Araçlarımız da aynısını hedefler: küçük ama net, tüm uygulamanızı tek ritimde tutar.

kkwaenggwariKkwaenggwari adını, tokmakla çalınan küçük bir Kore gongu olan kkwaenggwari'den (꽹과리) alır. Parlak ve berrak tınısı, bu küçük açık kaynak araçlara adını verdi.