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

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

מהן ספריות רכיבים לא מעוצבים?

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

היתרונות של ספריות רכיבים לא מעוצבים

הנה כמה מהיתרונות של שימוש בספריות רכיבים לא מעוצבות:

• שליטה מלאה בעיצוב: ספריות רכיבים לא מעוצבות נותנות לך שליטה מלאה על איך הרכיבים שלך נראים. אתה יכול להשתמש בכל CSS או מסגרת סטיילינג כדי להתאים אישית את הרכיבים כך שיתאימו לצרכים שלך.
• להאיץ את הפיתוח: ספריות רכיבים לא מעוצבות יכולות לעזור לך להאיץ את הפיתוח על ידי אספקת קבוצה של רכיבים מובנים מראש שתוכל להשתמש בהם באפליקציה שלך.
  instagram viewer
• קל לתחזוקה: ספריות רכיבים לא מעוצבות קלות לתחזוקה מכיוון שהן אינן מחוברות הדוק למסגרת עיצוב ספציפית כלשהי. זה אומר שאתה יכול לעדכן בקלות את הסגנון מבלי לבצע שינויים בקוד הבסיסי.

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

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

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

npm install @radix-ui/react-accordion

לאחר התקנת רכיב האקורדיון, תוכל ליצור אקורדיונים באפליקציית React שלך.

הנה דוגמה לשימוש ברכיב האקורדיון:

import React from"react"
import * as Accordion from"@radix-ui/react-accordion"
exportdefaultfunctionApp() {
return (


"single" defaultValue="item-1" collapsible>
"item-1">
Is this accordion unstyled?</Accordion.Trigger>
Yes. It is unstyled.</Accordion.Content>
 </Accordion.Item>
 </Accordion.Root>
 </div>
 )
}

בלוק הקוד למעלה מגדיר רכיב אקורדיון בסיסי לא מעוצב באמצעות ה @radix-ui/react-accordion ספרייה, המאפשרת פריטים מתקפלים עם תוכן הניתן להתאמה אישית.

הקוד יפיק אקורדיון שנראה כך:

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

Adobe פיתחה ומתחזקת את ספריית React Aria. הספרייה היא חלק ממערכת העיצוב הנרחבת יותר של Adobe Spectrum, המספקת סט מקיף של הנחיות עיצוב ומשאבים לבניית ממשקי משתמש נגישים. האלמנטים המסופקים על ידי ספריית React Aria אינם מעוצבים, ומאפשרים לך להתאים אישית את האלמנטים כך שיתאימו לצרכים שלך.

כדי להשתמש ב-React Aria ביישום React שלך, התקן אותו על ידי הפעלת הפקודה הבאה:

npm install react-aria

להלן דוגמה כיצד ליצור רכיב כפתור באמצעות useButton וו:

import React from'react'
import {useButton} from'react-aria';
functionButton(props: any) {
let ref = React.useRef(null);
let { buttonProps } = useButton(props, ref);
return (

 {props.children}
 </button>
 );
}
exportdefault Button;

עכשיו אתה יכול לייבא ולעבד את לַחְצָן רכיב בכל רכיב אחר שתבחר.

לדוגמה:

import React from'react'
import Button from'./Button';
functionApp() {
return (
Click Me</Button>
 );
}
exportdefault App;

כאשר אתה מעבד את גוש הקוד שלמעלה, הוא יפיק כפתור פשוט שנראה כך:

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

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

אתה יכול להתקין את Base UI באפליקציית React שלך עם הפקודה הזו:

npm install @mui/base

ממשק המשתמש של Base מספק רכיבים בדרכים, כלומר אתה יכול לייבא ולהשתמש ברכיבים ישירות מהספרייה. זה גם מספק ווים שבהם אתה יכול להשתמש כדי ליצור ולהגדיר את הרכיבים שלך.

להלן דוגמה לשימוש ברכיבי ממשק משתמש בסיסי:

import React from"react";
import Button from"@mui/base/Button";
exportdefaultfunctionApp() {
return (


Click Me</Button>
 </div>
 );
}

קוד זה יוצר כפתור פשוט באמצעות ה לַחְצָן רכיב של ספריית ממשק המשתמש הבסיסי. אתה יכול גם להשתמש ב useButton וו לביצוע אותה משימה.

import React from"react";
import useButton from"@mui/base/useButton";
exportdefaultfunctionApp() {
const { getRootProps } = useButton();
return (


Click Me</button>
 </div>
 );
}

ה useButton וו וה לַחְצָן הרכיב יפיק כפתור לא מעוצב, כפי שמוצג בתמונה למטה.

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

אתה יכול להתקין את הספרייה באמצעות הפקודה הבאה:

npm install @headlessui/react

לאחר התקנת הספרייה, תוכל להשתמש במספר הרכיבים שהספרייה מספקת באפליקציית React שלך.

לדוגמה:

import React from"react";
import { Popover } from"@headlessui/react";
exportdefaultfunctionApp() {
return (




Popover</Popover.Button>

This is a Popover</p>
 </Popover.Panel>
 </Popover>
 </div>
 );
}

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

קבל שליטה מלאה עם רכיבים לא מעוצבים

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