Οι 4 καλύτερες βιβλιοθήκες Unstyled Component για τη δημιουργία προσαρμόσιμων εφαρμογών React

Μπορείτε να χρησιμοποιήσετε βιβλιοθήκες στοιχείων που παρέχουν προκατασκευασμένα στοιχεία με στυλ για να απλοποιήσετε τη διαδικασία ανάπτυξης για τις εφαρμογές React. Αυτές οι βιβλιοθήκες μπορούν να εξοικονομήσουν πολύ χρόνο και προσπάθεια, αλλά μπορούν επίσης να περιορίσουν τον έλεγχό σας στο στυλ της εφαρμογής σας. Εάν χρειάζεστε περισσότερο έλεγχο στο στυλ των εφαρμογών σας React, σκεφτείτε να χρησιμοποιήσετε μια βιβλιοθήκη στοιχείων χωρίς στυλ.

Τι είναι οι βιβλιοθήκες Unstyled Components;

Συστατικό χωρίς στυλ Οι βιβλιοθήκες χρησιμοποιούνται για την ανάπτυξη προσβάσιμων εφαρμογών React. Είναι συλλογές επαναχρησιμοποιήσιμων στοιχείων διεπαφής χρήστη χωρίς προκαθορισμένα στυλ. Σας παρέχουν τη βασική δομή των στοιχείων διεπαφής χρήστη χωρίς κανένα στυλ. Αυτό σας δίνει τον πλήρη έλεγχο της εμφάνισης και της αίσθησης των εξαρτημάτων σας.

Πλεονεκτήματα των βιβλιοθηκών Unstyled Components

Ακολουθούν μερικά από τα πλεονεκτήματα της χρήσης βιβλιοθηκών στοιχείων χωρίς στυλ:

• Απόλυτος έλεγχος στο styling: Οι βιβλιοθήκες στοιχείων χωρίς στυλ σάς δίνουν τον πλήρη έλεγχο της εμφάνισης των στοιχείων σας. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε πλαίσιο CSS ή στυλ για να προσαρμόσετε τα στοιχεία ώστε να ταιριάζουν με τις ανάγκες σας.
• Επιταχύνετε την ανάπτυξη: Οι μη στιλ βιβλιοθήκες στοιχείων μπορούν να σας βοηθήσουν να επιταχύνετε την ανάπτυξη παρέχοντας ένα σύνολο προκατασκευασμένων στοιχείων που μπορείτε να χρησιμοποιήσετε στην εφαρμογή σας.
• Εύκολο στη συντήρηση: Οι βιβλιοθήκες στοιχείων χωρίς στυλ είναι εύκολο να διατηρηθούν επειδή δεν συνδέονται στενά με κάποιο συγκεκριμένο πλαίσιο στυλ. Αυτό σημαίνει ότι μπορείτε εύκολα να ενημερώσετε το στυλ χωρίς να κάνετε αλλαγές στον υποκείμενο κώδικα.

Το Radix UI είναι μια βιβλιοθήκη στοιχείων χωρίς στυλ που εστιάζει στην προσβασιμότητα. Παρέχει ένα σύνολο στοιχείων διεπαφής χρήστη που έχουν σχεδιαστεί για να είναι προσβάσιμα σε όλους τους χρήστες. Μπορείς δημιουργήστε όμορφες εφαρμογές React χρησιμοποιώντας το Radix UI.

Όταν εργάζεστε με το 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 Design System, το οποίο παρέχει ένα ολοκληρωμένο σύνολο οδηγιών σχεδιασμού και πόρων για τη δημιουργία προσβάσιμων διεπαφών χρήστη. Τα στοιχεία που παρέχονται από τη βιβλιοθήκη React Aria δεν έχουν στυλ, επιτρέποντάς σας να προσαρμόσετε τα στοιχεία ώστε να ταιριάζουν στις ανάγκες σας.

Για να χρησιμοποιήσετε το React Aria στην εφαρμογή React, εγκαταστήστε το εκτελώντας την ακόλουθη εντολή:

npm install react-aria

Ακολουθεί ένα παράδειγμα για το πώς να δημιουργήσετε ένα στοιχείο κουμπιού χρησιμοποιώντας το κουμπί χρήσης άγκιστρο:

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 Components αντ' αυτού βιβλιοθήκη. Αυτή η βιβλιοθήκη παρέχει προκατασκευασμένα στοιχεία που είναι προσβάσιμα από προεπιλογή. Είναι ένα λεπτό στρώμα πάνω από τη βιβλιοθήκη React Aria. Τα στοιχεία που παρέχονται είναι χωρίς στυλ, επομένως οι δύο βιβλιοθήκες μοιάζουν πολύ.

Το Base UI είναι μια βιβλιοθήκη μη στιλ React UI που παρέχει στοιχεία διεπαφής χρήστη χωρίς στυλ. Η ομάδα Material UI δημιούργησε το Base UI με ένα σύνολο βασικών στοιχείων που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε τις δικές σας προσαρμοσμένες εφαρμογές React. Στήριξαν τη βιβλιοθήκη Base UI στο ίδιο στιβαρή μηχανική ως περιβάλλον χρήστη υλικού, αλλά το Base UI δεν υλοποιεί το Material Design.

Μπορείτε να εγκαταστήσετε το Base UI στην εφαρμογή React με αυτήν την εντολή:

npm install @mui/base

Το Base UI παρέχει στοιχεία εν κινήσει, που σημαίνει ότι μπορείτε να εισάγετε και να χρησιμοποιήσετε απευθείας στοιχεία από τη βιβλιοθήκη. Παρέχει επίσης άγκιστρα που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε και να διαμορφώσετε τα στοιχεία σας.

Ακολουθεί ένα παράδειγμα χρήσης στοιχείων βασικής διεπαφής χρήστη:

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


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

Αυτός ο κώδικας δημιουργεί ένα απλό κουμπί χρησιμοποιώντας το Κουμπί στοιχείο της βιβλιοθήκης βασικής διεπαφής χρήστη. Μπορείτε επίσης να χρησιμοποιήσετε το κουμπί χρήσης γάντζο για να εκτελέσετε την ίδια εργασία.

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


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

ο κουμπί χρήσης γάντζος και το Κουμπί Το στοιχείο θα δημιουργήσει ένα κουμπί χωρίς στυλ, όπως φαίνεται στην παρακάτω εικόνα.

Μια άλλη βιβλιοθήκη που μπορείτε να εξερευνήσετε είναι το Headless UI, το οποίο προσφέρει στοιχεία διεπαφής χωρίς στυλ, δίνοντάς σας την ελευθερία να προσαρμόσετε την εμφάνιση και τη συμπεριφορά των στοιχείων διεπαφής χρήστη όπως σας ταιριάζει.

Μπορείτε να εγκαταστήσετε τη βιβλιοθήκη χρησιμοποιώντας την ακόλουθη εντολή:

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>
 );
}

Σε αυτό το παράδειγμα, δημιουργείτε ένα popover χρησιμοποιώντας το Ποπόβερ στοιχείο από τη βιβλιοθήκη διεπαφής χρήστη Headless. Το μπλοκ κώδικα παραπάνω θα δημιουργήσει ένα popover που μοιάζει με αυτό.

Αποκτήστε πλήρη έλεγχο με Unstyled Components

Οι μη στιλ βιβλιοθήκες στοιχείων σάς δίνουν τον πλήρη έλεγχο του στυλ της εφαρμογής React, επιτρέποντάς σας να δημιουργήσετε μοναδικές εμπειρίες χρήστη. Αυτές οι βιβλιοθήκες προσφέρουν μια σειρά από επιλογές που ταιριάζουν στις ανάγκες σας. Μπορείτε να δημιουργήσετε οπτικά ελκυστικές και εξαιρετικά προσαρμόσιμες εφαρμογές React αξιοποιώντας τις βιβλιοθήκες που αναφέρονται παραπάνω.