Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Pridanie nástroja na výber farieb do aplikácie React môže používateľom výrazne uľahčiť rozhodovanie o farbách, ktoré chcú použiť. Výber farieb je skvelý nástroj pre používateľov pracujúcich s grafickou aplikáciou alebo akoukoľvek aplikáciou, ktorá podporuje prispôsobenie.

Knižnica reakčných farieb ponúka širokú škálu možností a mnoho štýlov výberu farieb podľa vašich potrieb.

Pridanie nástroja na výber farieb do vašej aplikácie

Knižnica reakčných farieb uľahčuje pridanie výberu farieb do vašej aplikácie React. Táto knižnica poskytuje používateľom jednoduchý a intuitívny spôsob výberu farieb pre ich aplikácie. Kód sa ľahko používa a poskytuje skvelý používateľský zážitok. Pred pridaním nástroja na výber farieb to musíte urobiť vytvorte jednoduchú aplikáciu na reakcie.

Prehľad reakčných farieb

Knižnica reakčných farieb je skvelý spôsob, ako do aplikácie React pridať výber farieb. Ponúka ľahko použiteľné rozhranie, ktoré umožňuje používateľom vybrať si z množstva farieb. Knižnica tiež poskytuje rekvizity, ktoré môžete použiť na prispôsobenie výberu farieb.

instagram viewer

Kód na pridanie výberu farieb do vašej aplikácie React je jednoduchý. Ak chcete použiť knižnicu reakčných farieb, musíte ju najskôr nainštalovať pomocou npm, správca balíkov pre Node.js.

npm reagujem-farba

Potom jednoducho pridajte nasledujúci kód do komponentu, pre ktorý chcete zobraziť výber farby:

importovať Reagovať od'reagovať'
importovať { SketchPicker } od'react-color'
triedaKomponentpredlžujeReagovať.Komponent{
 render() {
vrátiť<SketchPicker />
 }
}
exportpredvolená Komponent

Vyššie uvedený kód vykreslí základný výber farieb. Používateľom to umožní vybrať si z množstva farieb. Výber tiež zobrazí HEX kód vybranej farby, ktorý môžete použiť v iných častiach aplikácie.

Dostupné rekvizity

Knižnica reakčných farieb poskytuje rekvizity na prispôsobenie výberu farieb. Pomocou týchto rekvizít môžete zmeniť veľkosť zberača, dostupné farby a oveľa viac.

Nižšie sú dostupné rekvizity pre výber farieb:

  • šírka: Šírka výberu farby v pixeloch.
  • výška: Výška nástroja na výber farby v pixeloch.
  • farba: Počiatočná farba voliča.
  • pri zmene: Funkcia spätného volania, ktorá sa spustí pri zmene farby.
  • onChangeComplete: Funkcia spätného volania, ktorá sa spustí po dokončení zmeny farby.

Nasledujúci kód ukazuje, ako používať všetky dostupné rekvizity pre výber farby:

importovať Reagovať od'reagovať'
importovať { SketchPicker } od'react-color'

triedaKomponentpredlžujeReagovať.Komponent{

 render() {
vrátiť (
 šírka={200}
 výška={200}
 farba="#ff0000"
 onChange={(color) => konzoly.log (farba)}
 onChangeComplete={(color, event)=> konzoly.log (farba)}
 />
 )
 }
}
exportpredvolená Komponent

Vyššie uvedený kód vykreslí výber farieb so šírkou 200 pixelov, výškou 200 pixelov, počiatočnou farbou #ff0000 a paletou farieb. Zobrazí sa tiež vstupné pole pre kód farby a zobrazí sa alfa kanál. Keď sa farba zmení, zavolá spätné volanie onChange a prihlási novú farbu do konzoly.

Pridanie ďalších výberov farieb

Knižnica reakčných farieb poskytuje celý rad rôznych výberov farieb, z ktorých si môžete vybrať, a okrem nástroja SketchPicker použitého v poslednej časti môžete použiť aj nástroj ChromePicker.

Importujte ChromePicker rovnakým spôsobom, akým ste importovali SketchPicker:

importovať { ChromePicker } od'react-color';

Po importovaní nástroja ChromePicker ho môžete použiť vo svojej aplikácii pridaním nasledujúceho kódu:

 farba={ toto.state.background }
 onChangeComplete={ toto.handleChangeComplete }
 vypnúťAlpha={pravda}
/>

ChromePicker má rovnaké rekvizity ako SketchPicker, ale má aj niekoľko ďalších možností, ako napríklad možnosť deaktivovať alfa kanál, čo môžete urobiť pomocou rekvizity disableAlpha. Farbu môžete nastaviť aj priamo pomocou farebnej podpery.

V knižnici reakčných farieb sú k dispozícii aj ďalšie nástroje na výber farieb, ako napríklad Block, Twitter a GitHub. Každý z týchto zberačov má svoje vlastné rekvizity, takže si určite prečítajte viac informácií v dokumentácii.

Zlepšite svoju používateľskú skúsenosť pomocou nástroja na výber farieb

Pridanie výberu farieb do vašej aplikácie React je skvelý spôsob, ako zlepšiť používateľskú skúsenosť. Umožňuje používateľom rýchlo a jednoducho vybrať farby pre svoje aplikácie. Pomocou CSS Tailwind môžete tiež urobiť výber farby užívateľsky prívetivejším.