קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

הוספת בוחר צבעים לאפליקציית React יכולה להקל על המשתמשים לקבל החלטות לגבי הצבעים שהם רוצים להשתמש בהם. בוררי צבעים הם כלי נהדר עבור משתמשים העובדים עם יישום גרפי או כל אפליקציה שתומכת בהתאמה אישית.

ספריית ה-react-color מציעה מגוון רחב של אפשרויות וסגנונות רבים של בוחר צבעים כדי להתאים לצרכים שלך.

הוספת בוחר צבעים לאפליקציה שלך

ספריית ה-react-color מקלה על הוספת בורר צבעים לאפליקציית React שלך. ספרייה זו מספקת דרך פשוטה ואינטואיטיבית למשתמשים לבחור צבעים עבור היישומים שלהם. הקוד פשוט לשימוש ומספק חווית משתמש מעולה. לפני הוספת בוחר צבעים, תחילה עליך לעשות זאת ליצור אפליקציית תגובה פשוטה.

סקירה כללית של צבע-תגובה

ספריית react-color היא דרך מצוינת להוסיף בוחר צבעים לאפליקציית React שלך. הוא מציע ממשק קל לשימוש המאפשר למשתמשים לבחור מתוך מגוון צבעים. הספרייה מספקת גם אביזרים שבהם אתה יכול להשתמש כדי להתאים אישית את בוחר הצבעים.

הקוד להוספת בוחר צבעים לאפליקציית React שלך הוא פשוט. כדי להשתמש בספריית react-color, תחילה עליך להתקין את הספרייה באמצעות

instagram viewer
npm, מנהל החבילות של Node.js.

npm i react-color

לאחר מכן, פשוט הוסף את הקוד הבא לרכיב שברצונך להציג את בוחר הצבעים:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { SketchPicker } מ'תגובה-צבע'
מעמדרְכִיבמשתרעלְהָגִיב.רְכִיב{
 render() {
לַחֲזוֹר<SketchPicker />
 }
}
יְצוּאבְּרִירַת מֶחדָל רְכִיב

הקוד לעיל יציג בוחר צבעים בסיסי. זה יאפשר למשתמשים לבחור מתוך מגוון צבעים. הבוחר יציג גם את קוד HEX של הצבע הנבחר, שבו תוכל להשתמש בחלקים אחרים של האפליקציה שלך.

אביזרים זמינים

ספריית ה-react-color מספקת אביזרים להתאמה אישית של בוחר הצבעים. אתה יכול להשתמש באביזרים האלה כדי לשנות את גודל הבוחר, הצבעים הזמינים ועוד הרבה יותר.

להלן האביזרים הזמינים עבור בוחר הצבעים:

  • רוֹחַב: הרוחב של בוחר הצבעים בפיקסלים.
  • גוֹבַה: גובה בוחר הצבעים בפיקסלים.
  • צֶבַע: הצבע הראשוני של הבורר.
  • בשינוי: פונקציית התקשרות חוזרת הפועלת כאשר הצבע משתנה.
  • onChangeComplete: פונקציית התקשרות חוזרת הפועלת עם השלמת שינוי הצבע.

הקוד הבא מראה כיצד להשתמש בכל האביזרים הזמינים עבור בוחר הצבעים:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { SketchPicker } מ'תגובה-צבע'

מעמדרְכִיבמשתרעלְהָגִיב.רְכִיב{

 render() {
לַחֲזוֹר (
 רוחב={200}
 גובה={200}
 צבע="#ff0000"
 onChange={(color) => לְנַחֵם.log (צבע)}
 onChangeComplete={(צבע, אירוע)=> לְנַחֵם.log (צבע)}
 />
 )
 }
}
יְצוּאבְּרִירַת מֶחדָל רְכִיב

הקוד לעיל יציג בוחר צבעים ברוחב של 200 פיקסלים, גובה של 200 פיקסלים, צבע התחלתי של #ff0000 ופלטת צבעים. זה גם יציג שדה קלט עבור קוד הצבע ויציג את ערוץ האלפא. כאשר הצבע משתנה, הוא יקרא ל-onChange התקשרות חוזרת וירשם את הצבע החדש למסוף.

הוספת בוחרי צבעים נוספים

ספריית ה-react-color מספקת מגוון של בוחרי צבעים שונים לבחירה, ובנוסף ל-SketchPicker המשמש בסעיף האחרון, אתה יכול גם להשתמש ב-ChromePicker.

ייבא את ה-ChromePicker באותו אופן שייבאת את SketchPicker:

יְבוּא { ChromePicker } מ'תגובה-צבע';

לאחר שייבאת את ChromePicker, תוכל להשתמש בו באפליקציה שלך על ידי הוספת הקוד הבא:

 color={ זֶה‎.state.background }
 onChangeComplete={ זֶה.handleChangeComplete }
 disableAlpha={נָכוֹן}
/>

ה-ChromePicker לוקח את אותם אביזרים כמו ה-SketchPicker, אבל יש לו גם כמה אפשרויות נוספות, כמו היכולת להשבית את ערוץ האלפא, מה שאתה יכול לעשות עם ה-disableAlpha prop. אתה יכול גם להגדיר את הצבע ישירות עם אביזר הצבע.

ישנם גם בוחרי צבעים אחרים זמינים בספריית צבע-הגיב, כגון בלוק, טוויטר ו-GitHub. לכל אחד מהבוררים הללו יש אביזרים משלו, אז הקפד לבדוק את התיעוד לקבלת מידע נוסף.

שפר את חווית המשתמש שלך עם בוחר צבעים

הוספת בוחר צבעים לאפליקציית React שלך היא דרך מצוינת לשפר את חווית המשתמש. זה מאפשר למשתמשים לבחור במהירות ובקלות צבעים עבור היישומים שלהם. אתה יכול גם להפוך את בוחר הצבעים ליותר ידידותי למשתמש באמצעות Tailwind CSS.