كوينغواري · مفتوح المصدر

صغير الحجم.عالي الرنين.

أدوات مفتوحة المصدر للحالة والحركة في React وReact Native. ثلاث حزم مركّزة تعمل من أول استيراد، وتنمو بقدر ما تحتاج فقط.

  • 3 حزم
  • React · React Native
  • تعريفات TypeScript
  • رخصة ISC

اقرع الغونغ. كل أداة تجيب على الرنين بطريقتها.

01 · الأدوات

ثلاث آلات.إيقاع واحد.

كل أداة تؤدي مهمة واحدة حتى النهاية. استخدمها منفردة أو معًا، فقد صُمّمت لتتكامل.

restate

الحالةReact + React Native

شاركها بخطّاف واحد.واحفظها حين تقرّر.

تقرأ المكوّنات القيمة نفسها من دون Provider أو action أو reducer. لا يُعاد عرضها إلا عندما يتغيّر ما اختارته، ويحدث الحفظ والاستعادة في اللحظة التي تحددها بالضبط.

  • مشاركة من دون Provider
  • اشترك في الجزء الذي تختاره فقط
  • حفظ صريح إلى IndexedDB أو MMKV
التثبيت
npm install @kkwaenggwari/restate

مباشر

مكوّنان ومخزن واحد

اضغط زرًا في أي جانب. تقرأ اللوحتان قيمة restate() نفسها وتتغيّران معًا؛ أما شارة الشحن فتستمع إلى اختيار واحد فقط.

الترويسة

2 في السلة

قائمة المنتجات

2 في السلة

Animated

محرّك الحركةReact DOM

قيمة واحدةتقود الشاشة كلها.

استخدم في React DOM دوال timing وspring وinterpolate التي تعرفها من React Native Animated. قيمة واحدة تتحكم في نمط عناصر كثيرة، من دون عرض React في كل إطار.

  • واجهة React Native Animated API التي تعرفها
  • المقاطعة تحافظ على الموضع والسرعة
  • ينظّف كل شيء حين يختفي مالكه
التثبيت
npm install @kkwaenggwari/animated

مباشر

Value واحدة، اثنا عشر شكلًا

يغيّر المنزلق Value واحدة فقط. ومنها تُشتق مواضع الأشكال الاثني عشر ودورانها وأحجامها وزواياها. اضغط زر النابض، ثم أمسك المنزلق في منتصف الحركة.

Animated Chorus

مكوّنات جاهزةReact · React Native

التفاعلات الصعبة،جاهزة بالفعل.

أرقام تتدحرج، وتمييز ينتقل، وقوائم لا تحرّك إلا ما تغيّر، ولوحات منبثقة، وإجراءات بالسحب. مرّر بياناتك فقط — من دون provider أو استدعاء إعداد — في React وReact Native.

  • أرقام وعلامات تبويب وقوائم ولوحات
  • الاستيراد نفسه على الويب والتطبيقات الأصلية
  • الإدخال الجديد يكمل مما على الشاشة
التثبيت
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

مباشر

لوحة معلومات لا تحتاج إلا إلى البيانات

اختر فترة: ينتقل MotionHighlight إليها، ويتدحرج MotionNumber، ويمتلئ ProgressRing، ولا يحرّك MotionList إلا الصفوف التي تغيّرت.

اليومهذا الأسبوعهذا الشهر

الزيارات

1,284

  1. الرئيسية
  2. الأسعار
  3. Docs
  4. المدونة

بيانات تجريبية

02 · الفرقة

قرعة واحدة.كل شيء يتحرّك.

بُني هذا المسرح بـ Animated. قيمة Value واحدة تحمل تقدّم التمرير تقود معًا موضع 48 شكلًا ودورانها وحجمها وشفافيتها.

  1. 01
    رنين

    نقاط متناثرة تتجمّع في حلقات غونغ.

  2. 02
    انقسام

    تنقسم الحلقة إلى ثلاث، وتأخذ كل منها لون أداة.

  3. 03
    تشكّل

    تصبح روابط الحالة، ومسار الحركة، وأعمدة الجوقة.

  4. 04
    إيقاع

    يصطف كل شيء ويقع على النبضة نفسها.

progress1.00

03 · المبادئ

صغير،من البداية إلى النهاية.

ابدأ باستيراد واحد

لا provider مغلِّف ولا إعداد عام مسبق. أضف الإمكانات فقط حين يطلبها تطبيقك.

فقط ما يحتاج إلى ذلك

لا يُحدَّث إلا المكوّنات التي تغيّر اختيارها، والعناصر التي تستخدم قيمة، والصفوف التي تحرّكت.

مسؤول حتى النهاية

تكمل الحركة المقاطَعة مما على الشاشة، وتُحرَّر الاشتراكات والحركات حين يختفي مالكها.

أنواع وتوثيق

تأتي كل حزمة بتعريفات TypeScript، والتوثيق متاح بـ 39 لغة.

04 · الاسم

كوينغواري،الغونغ الذي يطلق الفرقة.

يُنطق «كوينغ-غوا-ري». في فن البونغمول الكوري، يضبط عازف الكوينغواري (꽹과리) الرئيسي الإيقاع للفرقة كلها. وأدواتنا تسعى إلى الشيء نفسه: صغيرة لكنها واضحة، لتُبقي تطبيقك كله على إيقاع واحد.

kkwaenggwariاسم كوينغواري مأخوذ من الكوينغواري (꽹과리)، وهو غونغ كوري صغير يُقرع بمطرقة. ألهم رنينه الصافي المشرق اسم هذه الأدوات الصغيرة مفتوحة المصدر.