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

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

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

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

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

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

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

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

1. ממשק המשתמש של Radix

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" 
 
export default function App() { 
  return ( 
    <div> 
      <Accordion.Root type="single" defaultValue="item-1" collapsible> 
        <Accordion.Item value="item-1"> 
          <Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger> 
          <Accordion.Content>Yes. It is unstyled.</Accordion.Content> 
        </Accordion.Item> 
      </Accordion.Root> 
    </div> 
  ) 
}

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

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

2. תגיב אריה

ספריית 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'; 
 
function Button(props: any) { 
  let ref = React.useRef(null); 
  let { buttonProps } = useButton(props, ref); 
 
  return ( 
    <button {...buttonProps} ref={ref}> 
      {props.children} 
    </button> 
  ); 
} 
 
export default Button;

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

לדוגמה:

import React from 'react' 
import Button from './Button'; 
 
function App() { 
  return ( 
    <Button>Click Me</Button> 
  ); 
} 
 
export default App;

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

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

3. ממשק משתמש בסיס

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

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

npm install @mui/base

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

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

import React from "react"; 
import Button from "@mui/base/Button"; 
 
export default function App() { 
  return ( 
    <div> 
      <Button>Click Me</Button> 
    </div> 
  ); 
}

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

import React from "react"; 
import useButton from "@mui/base/useButton"; 
 
export default function App() { 
  const { getRootProps } = useButton(); 
 
  return ( 
    <div> 
      <button {...getRootProps()}>Click Me</button> 
    </div> 
  ); 
}

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

4. ממשק משתמש ללא ראש

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

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

npm install @headlessui/react

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

לדוגמה:

import React from "react"; 
import { Popover } from "@headlessui/react"; 
 
export default function App() { 
  return ( 
    <div> 
      <Popover> 
        <Popover.Button>Popover</Popover.Button> 
 
        <Popover.Panel> 
          <p>This is a Popover</p> 
        </Popover.Panel> 
      </Popover> 
    </div> 
  ); 
}

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

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

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