4 најбоље библиотеке компоненти без стила за прављење прилагодљивих Реацт апликација

Можете да користите библиотеке компоненти које пружају унапред изграђене, стилизоване елементе да бисте поједноставили процес развоја за Реацт апликације. Ове библиотеке могу уштедети много времена и труда, али такође могу ограничити вашу контролу над стилизовањем ваше апликације. Ако вам је потребна већа контрола над стиловима ваших Реацт апликација, размислите о коришћењу библиотеке компоненти без стила.

Шта су библиотеке нестилизованих компоненти?

Унстилед компонента библиотеке се користе за развој приступачних Реацт апликација. То су колекције компоненти корисничког интерфејса за вишекратну употребу без унапред дефинисаних стилова. Они вам пружају основну структуру елемената корисничког интерфејса без икаквог стила. Ово вам даје потпуну контролу над изгледом и осећајем ваших компоненти.

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

Ево неких предности коришћења библиотека компоненти без стила:

• Потпуна контрола над стилизовањем: Нестилизоване библиотеке компоненти дају вам потпуну контролу над изгледом ваших компоненти. Можете да користите било који ЦСС или оквир за стилизовање да бисте прилагодили компоненте тако да одговарају вашим потребама.
• Убрзати развој: Библиотеке компоненти које нису стилизоване могу вам помоћи да убрзате развој пружањем скупа унапред изграђених компоненти које можете да користите у својој апликацији.
• Лако се одржава: Библиотеке компоненти које нису стилизоване су једноставне за одржавање јер нису чврсто повезане са било којим специфичним оквиром за стилизовање. То значи да можете лако ажурирати стил без уношења промена у основни код.

Радик УИ је библиотека компоненти без стила која се фокусира на приступачност. Пружа скуп компоненти корисничког интерфејса дизајнираних да буду доступни свим корисницима. Можете направите прелепе Реацт апликације користећи Радик УИ.

Када радите са Радик УИ, можете инсталирати појединачне компоненте које су вам потребне уместо целе библиотеке. Ово осигурава да ваша апликација буде лагана.

На пример, ако вам је потребна само компонента хармонике, можете је инсталирати у своју апликацију тако што ћете покренути следећу команду:

npm install @radix-ui/react-accordion

Након што инсталирате хармонику компоненту, можете да креирате хармонике у вашој Реацт апликацији.

Ево примера како се користи компонента хармонике:

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

Блок кода изнад поставља основну нестилизовану компоненту хармонике користећи @радик-уи/реацт-аццордион библиотека, омогућавајући склопиве ставке са прилагодљивим садржајем.

Код ће генерисати хармонику која изгледа овако:

Реацт Ариа библиотека је скуп кукица за изградњу корисничких интерфејса у Реацт-у. Библиотека олакшава креирање приступачних веб апликација пружањем колекције компоненти које прате најбоље праксе за приступачност.

Адобе је развио и одржава библиотеку Реацт Ариа. Библиотека је део опсежнијег Адобе Спецтрум Десигн система, који пружа свеобухватан скуп смерница и ресурса за дизајн за изградњу приступачних корисничких интерфејса. Елементи које обезбеђује библиотека Реацт Ариа нису стилизовани, што вам омогућава да прилагодите елементе тако да одговарају вашим потребама.

Да бисте користили Реацт Ариа у својој Реацт апликацији, инсталирајте је тако што ћете покренути следећу команду:

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;

Када прикажете блок кода изнад, он ће генерисати једноставно дугме које изгледа овако:

Ако вам је непријатно да користите Реацт Ариа због кукица, користите Реацт Ариа компоненте уместо тога библиотека. Ова библиотека обезбеђује унапред изграђене компоненте које су подразумевано доступне. То је танак слој на врху библиотеке Реацт Ариа. Достављене компоненте нису стилизоване, тако да су две библиотеке веома сличне.

Основни кориснички интерфејс је нестилизована Реацт УИ библиотека која обезбеђује компоненте корисничког интерфејса без стилизовања. Тим за Материал УИ креирао је Басе УИ са скупом основних компоненти које можете користити за прављење сопствених прилагођених Реацт апликација. На истом су засновали библиотеку Басе УИ робустан инжењеринг као Материал УИ, али Басе УИ не примењује дизајн материјала.

Можете инсталирати Басе УИ у своју Реацт апликацију помоћу ове команде:

npm install @mui/base

Основни кориснички интерфејс обезбеђује компоненте у покрету, што значи да можете директно да увозите и користите компоненте из библиотеке. Такође пружа куке које можете користити за креирање и конфигурисање компоненти.

Ево примера коришћења компоненти основног корисничког интерфејса:

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

Тхе усеБуттон кука и Дугме компонента ће генерисати дугме без стила, као што је приказано на слици испод.

Још једна библиотека коју можете истражити је Хеадлесс УИ, која нуди нестилизоване елементе корисничког интерфејса, дајући вам слободу да прилагодите изглед и понашање компоненти корисничког интерфејса како вам одговара.

Библиотеку можете инсталирати помоћу следеће команде:

npm install @headlessui/react

Након инсталирања библиотеке, можете користити неколико компоненти које библиотека пружа у вашој Реацт апликацији.

На пример:

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




Popover</Popover.Button>

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

У овом примеру креирате искачући прозор користећи Скокнем компонента из библиотеке Хеадлесс УИ. Блок кода изнад ће генерисати искачући прозор који изгледа овако.

Добијте потпуну контролу са нестилизованим компонентама

Библиотеке компоненти без стила дају вам потпуну контролу над стилом ваше Реацт апликације, омогућавајући вам да креирате јединствено корисничко искуство. Ове библиотеке нуде низ опција које одговарају вашим потребама. Можете да креирате визуелно привлачне и веома прилагодљиве Реацт апликације коришћењем горе наведених библиотека.