4 най-добри нестилизирани библиотеки с компоненти за изграждане на адаптивни React приложения

Можете да използвате библиотеки с компоненти, които предоставят предварително изградени, стилизирани елементи, за да опростите процеса на разработка за React приложения. Тези библиотеки могат да спестят много време и усилия, но също така могат да ограничат контрола ви върху стила на вашето приложение. Ако имате нужда от повече контрол върху стила на вашите React приложения, помислете за използването на библиотека с компоненти без стил.

Какво представляват библиотеките с нестилизирани компоненти?

Нестилизиран компонент библиотеките се използват за разработване на достъпни React приложения. Те са колекции от компоненти на потребителския интерфейс за многократна употреба без предварително дефинирани стилове. Те ви предоставят основната структура на елементите на потребителския интерфейс без никакъв стил. Това ви дава пълен контрол върху това как вашите компоненти изглеждат и се чувстват.

Предимства на библиотеките с нестилизирани компоненти

Ето някои от предимствата на използването на нестилизирани библиотеки с компоненти:

• Пълен контрол върху стайлинга: Нестилизираните библиотеки с компоненти ви дават пълен контрол върху това как изглеждат вашите компоненти. Можете да използвате всеки CSS или рамка за стилизиране, за да персонализирате компонентите, за да отговарят на вашите нужди.
• Ускорете развитието: Нестилизираните библиотеки с компоненти могат да ви помогнат да ускорите разработката, като предоставят набор от предварително изградени компоненти, които можете да използвате в приложението си.
• Лесен за поддръжка: Библиотеките с компоненти без стил са лесни за поддръжка, защото не са тясно свързани с никоя конкретна рамка за стилизиране. Това означава, че можете лесно да актуализирате стила, без да правите промени в основния код.

Radix UI е нестилизирана библиотека с компоненти, която се фокусира върху достъпността. Той предоставя набор от 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 Aria е набор от кукички за изграждане на потребителски интерфейси в React. Библиотеката улеснява създаването на достъпни уеб приложения, като предоставя колекция от компоненти, които следват най-добрите практики за достъпност.

Adobe разработи и поддържа библиотеката React Aria. Библиотеката е част от по-разширената Adobe Spectrum Design System, която предоставя изчерпателен набор от насоки за проектиране и ресурси за изграждане на достъпни потребителски интерфейси. Елементите, предоставени от библиотеката 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 библиотека вместо това. Тази библиотека предоставя предварително изградени компоненти, които са достъпни по подразбиране. Това е тънък слой върху библиотеката на React Aria. Предоставените компоненти не са стилизирани, така че двете библиотеки са много сходни.

Base UI е нестилизирана React UI библиотека, която предоставя UI компоненти без стил. Екипът на Material UI създаде Base UI с набор от основни компоненти, които можете да използвате, за да създадете свои собствени персонализирани приложения на React. Те базират библиотеката Base UI на същото стабилно инженерство като материален потребителски интерфейс, но Base UI не прилага Material Design.

Можете да инсталирате Base UI във вашето приложение React с тази команда:

npm install @mui/base

Base UI предоставя компоненти в движение, което означава, че можете директно да импортирате и използвате компоненти от библиотеката. Той също така предоставя кукички, които можете да използвате, за да създавате и конфигурирате вашите компоненти.

Ето пример за използване на базови UI компоненти:

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


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

Този код генерира прост бутон с помощта на Бутон компонент на библиотеката Base UI. Можете също да използвате useButton кука за изпълнение на същата задача.

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


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

The useButton кука и Бутон ще генерира неоформен бутон, както е показано на изображението по-долу.

Друга библиотека, която можете да изследвате, е Headless UI, която предлага нестилизирани UI елементи, давайки ви свободата да персонализирате външния вид и поведението на вашите 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 UI. Кодовият блок по-горе ще генерира изскачащ прозорец, който изглежда така.

Получете пълен контрол с неоформени компоненти

Нестилизираните библиотеки с компоненти ви дават пълен контрол върху стила на вашето React приложение, което ви позволява да създавате уникални потребителски изживявания. Тези библиотеки предлагат набор от опции, които да отговарят на вашите нужди. Можете да създавате визуално привлекателни и много адаптивни React приложения, като използвате библиотеките, споменати по-горе.