4 Լավագույն Unstyled Component Libraries՝ հարմարեցված React հավելվածներ ստեղծելու համար

Այս հարմար գրադարանները կարող են կատարյալ ընտրություն լինել ձեր React հավելվածները հեշտությամբ ստեղծելու և հարմարեցնելու համար:

Դուք կարող եք օգտագործել բաղադրիչ գրադարաններ, որոնք ապահովում են նախապես կառուցված, ոճավորված տարրեր՝ React հավելվածների մշակման գործընթացը պարզեցնելու համար: Այս գրադարանները կարող են խնայել շատ ժամանակ և ջանք, բայց դրանք կարող են նաև սահմանափակել ձեր վերահսկողությունը ձեր հավելվածի ոճավորման վրա: Եթե Ձեզ անհրաժեշտ է ավելի շատ վերահսկել ձեր React հավելվածների ոճը, մտածեք օգտագործել ոչ ոճավորված բաղադրիչների գրադարանը:

Որո՞նք են Unstyled Components գրադարանները:

Unstyled բաղադրիչ գրադարաններն օգտագործվում են մատչելի React հավելվածներ մշակելու համար: Դրանք բազմակի օգտագործման UI բաղադրիչների հավաքածուներ են՝ առանց նախապես սահմանված ոճերի: Նրանք ձեզ տրամադրում են UI տարրերի հիմնական կառուցվածքը՝ առանց որևէ ոճավորման: Սա ձեզ հնարավորություն է տալիս լիովին վերահսկել ձեր բաղադրիչների տեսքը և զգացումը:

Unstyled Components գրադարանների առավելությունները

Ահա չստուգված բաղադրիչ գրադարանների օգտագործման առավելություններից մի քանիսը.

• Ոճավորելու ամբողջական վերահսկողություն. Չոճավորված բաղադրիչների գրադարանները հնարավորություն են տալիս լիովին վերահսկել ձեր բաղադրիչների տեսքը: Դուք կարող եք օգտագործել ցանկացած CSS կամ ոճավորման շրջանակ՝ բաղադրիչները ձեր կարիքներին համապատասխանեցնելու համար:
• Արագացնել զարգացումը. Unstyle բաղադրիչների գրադարանները կարող են օգնել ձեզ արագացնել զարգացումը` տրամադրելով մի շարք նախապես կառուցված բաղադրիչներ, որոնք կարող եք օգտագործել ձեր հավելվածում:
• Հեշտ է պահպանվել. Չոճավորված բաղադրիչների գրադարանները հեշտ է պահպանել, քանի որ դրանք սերտորեն կապված չեն ոճավորման որևէ հատուկ շրջանակի հետ: Սա նշանակում է, որ դուք կարող եք հեշտությամբ թարմացնել ոճավորումը՝ առանց հիմքում ընկած կոդում փոփոխություններ կատարելու:

1. Radix UI

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"
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 Design System-ի մի մասը, որն ապահովում է դիզայնի ուղեցույցների և ռեսուրսների համապարփակ փաթեթ՝ մատչելի օգտատերերի միջերեսներ ստեղծելու համար: 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;

Այժմ դուք կարող եք ներմուծել և ցուցադրել button բաղադրիչը ձեր ընտրած ցանկացած այլ բաղադրիչում:

Օրինակ:

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

Երբ վերը նշված կոդի բլոկը վերարտադրեք, այն կստեղծի պարզ կոճակ, որն ունի հետևյալ տեսքը.

Եթե ձեզ անհարմար է զգում React Aria-ն օգտագործել կեռիկների պատճառով, փոխարենը օգտագործեք React Aria Components գրադարանը: Այս գրադարանը տրամադրում է նախապես կառուցված բաղադրիչներ, որոնք հասանելի են լռելյայնորեն: Այն բարակ շերտ է React Aria գրադարանի վերևում: Տրամադրված բաղադրիչները ոճավորված չեն, ուստի երկու գրադարանները շատ նման են:

3. Base UI

Base UI-ն չմշակված React UI գրադարան է, որն ապահովում է UI բաղադրիչներ առանց ոճավորման: Material UI թիմը ստեղծեց Base UI-ը մի շարք հիմնարար բաղադրիչներով, որոնք կարող եք օգտագործել ձեր սեփական React հավելվածները ստեղծելու համար: Նրանք հիմնել են Base UI գրադարանը նույն հզոր ճարտարագիտության վրա, ինչ Material UI-ն, սակայն Base UI-ն չի իրականացնում Material Design-ը:

Դուք կարող եք տեղադրել Base UI ձեր React հավելվածում այս հրամանով.

npm install @mui/base

Base UI-ն ապահովում է բաղադրիչները շարժման մեջ, ինչը նշանակում է, որ դուք կարող եք ուղղակիորեն ներմուծել և օգտագործել բաղադրիչներ գրադարանից: Այն նաև տրամադրում է կեռիկներ, որոնք կարող եք օգտագործել ձեր բաղադրիչները ստեղծելու և կարգավորելու համար:

Ահա Base UI բաղադրիչների օգտագործման օրինակ.

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

Այս կոդը ստեղծում է պարզ կոճակ՝ օգտագործելով Base UI գրադարանի Button բաղադրիչը: Նույն առաջադրանքը կատարելու համար կարող եք նաև օգտագործել 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 կեռիկը և Button բաղադրիչը կստեղծեն չոճավորված կոճակ, ինչպես ցույց է տրված ստորև նկարում:

4. Անգլուխ UI

Մեկ այլ գրադարան, որը կարող եք ուսումնասիրել, Headless UI-ն է, որն առաջարկում է չոճավորված UI տարրեր՝ տալով ձեզ ազատություն՝ հարմարեցնելու ձեր միջերեսի բաղադրիչների տեսքն ու վարքագիծը, ինչպես որ հարմար եք համարում:

Դուք կարող եք տեղադրել գրադարանը՝ օգտագործելով հետևյալ հրամանը.

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

Այս օրինակում դուք ստեղծում եք popover՝ օգտագործելով Popover բաղադրիչը Headless UI գրադարանից: Վերևում գտնվող կոդի բլոկը կստեղծի այս տեսքի popover:

Ստացեք ամբողջական վերահսկողություն Unstyled բաղադրիչներով

Unstyled բաղադրիչ գրադարանները ձեզ լիարժեք վերահսկում են ձեր React հավելվածի ոճը, ինչը թույլ է տալիս ստեղծել եզակի օգտվողների փորձառություններ: Այս գրադարաններն առաջարկում են մի շարք տարբերակներ՝ ձեր կարիքներին համապատասխան: Դուք կարող եք ստեղծել տեսողականորեն գրավիչ և շատ հարմարեցված React հավելվածներ՝ օգտագործելով վերը նշված գրադարանները: