A 4 legjobb stílus nélküli komponenskönyvtár testreszabható React alkalmazások létrehozásához

A React-alkalmazások fejlesztési folyamatának leegyszerűsítéséhez használhat olyan összetevőkönyvtárakat, amelyek előre elkészített, stílusos elemeket biztosítanak. Ezek a könyvtárak sok időt és erőfeszítést takaríthatnak meg, de korlátozhatják az alkalmazás stílusának szabályozását is. Ha jobban szeretné szabályozni a React-alkalmazások stílusát, fontolja meg egy stílus nélküli összetevőkönyvtár használatát.

Mik azok a stílustalan komponens könyvtárak?

Stílus nélküli komponens könyvtárakat használnak hozzáférhető React alkalmazások fejlesztésére. Ezek újrafelhasználható felhasználói felület-összetevők gyűjteményei előre meghatározott stílusok nélkül. Stílus nélkül biztosítják a felhasználói felület elemeinek alapvető szerkezetét. Ezzel teljes mértékben ellenőrizheti az alkatrészek megjelenését és érzését.

A stílus nélküli komponenskönyvtárak előnyei

Íme néhány előnye a stílus nélküli komponenskönyvtárak használatának:

• Teljes ellenőrzés a stílus felett: A stílustalan komponenskönyvtárak teljes ellenőrzést biztosítanak az összetevők megjelenése felett. Bármilyen CSS-t vagy stíluskeretet használhat az összetevők igényeinek megfelelő testreszabásához.
• Gyorsítsa fel a fejlődést: A stílustalan komponenskönyvtárak segíthetnek felgyorsítani a fejlesztést azáltal, hogy előre elkészített összetevőket biztosítanak, amelyeket az alkalmazásban használhat.
• Könnyen karbantartható: A stílus nélküli komponenskönyvtárakat könnyű karbantartani, mert nincsenek szorosan kapcsolva semmilyen konkrét stíluskerethez. Ez azt jelenti, hogy egyszerűen frissítheti a stílust anélkül, hogy módosítaná a mögöttes kódot.

A Radix UI egy stílustalan komponenskönyvtár, amely a kisegítő lehetőségekre összpontosít. Olyan felhasználói felület-összetevőket biztosít, amelyek minden felhasználó számára elérhetők. tudsz készítsen gyönyörű React alkalmazásokat a Radix UI segítségével.

Ha Radix UI-val dolgozik, a teljes könyvtár helyett telepítheti az egyes összetevőket, amelyekre szüksége van. Ez biztosítja, hogy alkalmazása könnyű legyen.

Például, ha csak egy harmonika komponensre van szüksége, a következő parancs futtatásával telepítheti azt az alkalmazásába:

npm install @radix-ui/react-accordion

A harmonikakomponens telepítése után harmonikákat hozhat létre a React alkalmazásban.

Íme egy példa a harmonika komponens használatára:

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

A fenti kódblokk beállít egy alapvető stílustalan harmonika komponenst a @radix-ui/react-harmonika könyvtár, amely lehetővé teszi az összecsukható elemeket testreszabható tartalommal.

A kód egy harmonikát generál, amely így néz ki:

A React Aria könyvtár a React felhasználói felületének létrehozásához szükséges akasztók készlete. A könyvtár megkönnyíti az akadálymentes webalkalmazások létrehozását azáltal, hogy olyan összetevőket kínál, amelyek követik a kisegítő lehetőségek bevált gyakorlatait.

Az Adobe fejlesztette és karbantartja a React Aria könyvtárat. A könyvtár a kiterjedtebb Adobe Spectrum Design System része, amely átfogó tervezési irányelveket és erőforrásokat biztosít az akadálymentes felhasználói felületek létrehozásához. A React Aria könyvtár által biztosított elemek stílustalanok, lehetővé téve az elemek testreszabását az igényeinek megfelelően.

A React Aria használatához a React alkalmazásban telepítse azt a következő paranccsal:

npm install react-aria

Íme egy példa arra, hogyan lehet gombösszetevőt létrehozni a useButton horog:

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;

Most már importálhatja és renderelheti a gomb bármely más kiválasztott összetevőben.

Például:

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

Amikor a fenti kódblokkot rendereli, egy egyszerű gombot generál, amely így néz ki:

Ha kényelmetlenül érzi a React Aria használatát a horgok miatt, használja a React Aria Components könyvtár helyett. Ez a könyvtár előre elkészített összetevőket tartalmaz, amelyek alapértelmezés szerint elérhetők. Ez egy vékony réteg a React Aria könyvtár tetején. A mellékelt összetevők stílustalanok, így a két könyvtár nagyon hasonló.

Az alap felhasználói felület egy stílustalan React UI-könyvtár, amely stílusok nélkül biztosít felhasználói felület összetevőket. A Material UI csapata létrehozta a Base UI-t egy sor alapvető összetevővel, amelyek segítségével saját egyéni React-alkalmazásokat hozhat létre. Ugyanerre alapozták a Base UI könyvtárat robusztus tervezés, mint Material UI, de az alap felhasználói felület nem valósítja meg az anyagtervezést.

A Base UI-t a React alkalmazásba ezzel a paranccsal telepítheti:

npm install @mui/base

Az alap felhasználói felület útközben is biztosít összetevőket, vagyis közvetlenül importálhat és használhat összetevőket a könyvtárból. Ezenkívül horgokat is biztosít, amelyek segítségével létrehozhatja és konfigurálhatja az összetevőket.

Íme egy példa a Base UI összetevők használatára:

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


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

Ez a kód egy egyszerű gombot generál a Gomb a Base UI könyvtár összetevője. Használhatja a useButton horog ugyanazon feladat elvégzéséhez.

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


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

A useButton horog és a Gomb összetevő stílus nélküli gombot generál, ahogy az az alábbi képen is látható.

Egy másik felfedezhető könyvtár a Headless UI, amely stílustalan UI-elemeket kínál, így szabadon testreszabhatja a felhasználói felület összetevőinek megjelenését és viselkedését, ahogy jónak látja.

A könyvtárat a következő paranccsal telepítheti:

npm install @headlessui/react

A könyvtár telepítése után használhatja a könyvtár számos összetevőjét a React alkalmazásban.

Például:

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




Popover</Popover.Button>

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

Ebben a példában előugró ablakot hoz létre a Popover összetevőt a Headless UI könyvtárból. A fenti kódblokk előugró ablakot generál, amely így néz ki.

Teljes irányítás a stílus nélküli összetevőkkel

A stílus nélküli komponenskönyvtárak teljes ellenőrzést biztosítanak a React alkalmazás stílusa felett, lehetővé téve egyedi felhasználói élmények létrehozását. Ezek a könyvtárak számos lehetőséget kínálnak az Ön igényeinek megfelelően. A fent említett könyvtárak kihasználásával tetszetős és nagymértékben testreszabható React alkalmazásokat hozhat létre.