קוונגווארי · קוד פתוח

קטן במידה.צלול בצליל.

כלי קוד פתוח למצב ולתנועה ב־React וב־React Native. שלוש חבילות ממוקדות שעובדות מהייבוא הראשון וגדלות רק כמה שצריך.

  • 3 חבילות
  • React · React Native
  • הצהרות TypeScript
  • רישיון ISC

הכו בגונג. כל כלי עונה לצליל בדרכו.

01 · הכלים

שלושה כלים.פעימה אחת.

כל אחד עושה עבודה אחת, עד הסוף. השתמשו בהם לבד או יחד — הם נבנו להשתלב.

restate

מצבReact + React Native

שתפו אותו ב־hook אחד.שמרו אותו כשתחליטו.

רכיבים קוראים את אותו ערך בלי 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קוונגווארי נקרא על שם הקוונגווארי (꽹과리), גונג קוריאני קטן שמכים בו במקבת. הצליל הבהיר והצלול שלו העניק את השם לכלי הקוד הפתוח הקטנים האלה.