Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Pridėjus spalvų parinkiklį prie „React“ programos, vartotojams gali būti daug lengviau priimti sprendimus dėl norimų naudoti spalvų. Spalvų rinkikliai yra puikus įrankis vartotojams, dirbantiems su grafikos programa arba bet kuria programėle, palaikančia personalizavimą.

React-color biblioteka siūlo platų pasirinkimą ir daugybę spalvų rinkiklio stilių, kad atitiktų jūsų poreikius.

Spalvų parinkiklio pridėjimas prie programos

„React“ spalvų biblioteka leidžia lengvai pridėti spalvų parinkiklį prie „React“ programos. Ši biblioteka suteikia vartotojams paprastą ir intuityvų būdą pasirinkti spalvas savo programoms. Kodas yra paprastas naudoti ir suteikia puikią vartotojo patirtį. Prieš pridėdami spalvų parinkiklį, pirmiausia turite sukurti paprastą reagavimo programą.

Reakcijos spalvos apžvalga

„React“ spalvų biblioteka yra puikus būdas pridėti spalvų parinkiklį prie „React“ programos. Ji siūlo lengvai naudojamą sąsają, leidžiančią vartotojams pasirinkti iš įvairių spalvų. Bibliotekoje taip pat yra rekvizitų, kuriuos galite naudoti norėdami tinkinti spalvų rinkiklį.

instagram viewer

Kodas, skirtas pridėti spalvų parinkiklį prie „React“ programos, yra paprastas. Norėdami naudoti react-color biblioteką, pirmiausia turite įdiegti biblioteką naudodami npm, paketų tvarkyklė, skirta Node.js.

npm aš reaguoju-spalva

Tada tiesiog pridėkite šį kodą prie komponento, kuriame norite rodyti spalvų parinkiklį:

importuoti Reaguoti iš'reaguoti'
importuoti { SketchPicker } iš"reaguoti spalva"
klasėKomponentastęsiasiReaguoti.Komponentas{
 render() {
grąžinti<SketchPicker />
 }
}
eksportuotinumatytas Komponentas

Aukščiau pateiktas kodas pateiks pagrindinį spalvų rinkiklį. Tai leis vartotojams pasirinkti iš įvairių spalvų. Rinkiklis taip pat parodys pasirinktos spalvos HEX kodą, kurį galėsite naudoti kitose programos dalyse.

Galimi rekvizitai

Reakcijos spalvų bibliotekoje yra rekvizitai, leidžiantys tinkinti spalvų rinkiklį. Galite naudoti šiuos rekvizitus norėdami pakeisti rinkiklio dydį, galimas spalvas ir dar daugiau.

Žemiau pateikiami galimi spalvų rinkiklio rekvizitai:

  • plotis: spalvų rinkiklio plotis pikseliais.
  • aukščio: spalvų rinkiklio aukštis pikseliais.
  • spalva: pradinė parinkiklio spalva.
  • onChange: atgalinio skambinimo funkcija, kuri veikia pasikeitus spalvai.
  • onChangeComplete: atgalinio skambučio funkcija, kuri veikia, kai spalva keičiasi.

Šis kodas parodo, kaip naudoti visus turimus spalvų rinkiklio rekvizitus:

importuoti Reaguoti iš'reaguoti'
importuoti { SketchPicker } iš"reaguoti spalva"

klasėKomponentastęsiasiReaguoti.Komponentas{

 render() {
grąžinti (
 plotis={200}
 aukštis={200}
 spalva ="#ff0000"
 onChange={(spalva) => konsolė.log (spalva)}
 onChangeComplete={(spalva, įvykis)=> konsolė.log (spalva)}
 />
 )
 }
}
eksportuotinumatytas Komponentas

Aukščiau pateiktas kodas pateiks spalvų rinkiklį, kurio plotis 200 piks., aukštis 200 piks., pradinė spalva #ff0000 ir spalvų paletė. Taip pat bus rodomas spalvų kodo įvesties laukas ir alfa kanalas. Kai spalva pasikeis, ji iškvies onChange atgalinį skambutį ir užregistruos naują spalvą konsolėje.

Papildomų spalvų rinktuvų pridėjimas

Reakcijos spalvų bibliotekoje yra įvairių spalvų rinktuvų, iš kurių galima rinktis, ir be paskutinėje skiltyje naudoto „SketchPicker“, taip pat galite naudoti „ChromePicker“.

Importuokite „ChromePicker“ taip pat, kaip importavote „SketchPicker“:

importuoti { ChromePicker } iš"reaguoti spalva";

Kai importuosite „ChromePicker“, galėsite jį naudoti programoje pridėdami šį kodą:

 spalva={ tai.state.background }
 onChangeComplete={ tai.handleChangeComplete }
 disableAlpha={tiesa}
/>

„ChromePicker“ naudoja tuos pačius rekvizitus, kaip ir „SketchPicker“, bet taip pat turi keletą papildomų parinkčių, pvz., galimybę išjungti alfa kanalą, kurį galite padaryti naudodami „disableAlpha“ rekvizitą. Taip pat galite nustatyti spalvą tiesiogiai naudodami spalvų rekvizitą.

Reakcijos spalvų bibliotekoje taip pat yra kitų spalvų rinktuvų, tokių kaip „Block“, „Twitter“ ir „GitHub“. Kiekvienas iš šių rinktuvų turi savo rekvizitus, todėl daugiau informacijos ieškokite dokumentacijoje.

Pagerinkite naudotojo patirtį naudodami spalvų parinkiklį

Spalvų rinkiklio pridėjimas prie programos „React“ yra puikus būdas pagerinti vartotojo patirtį. Tai leidžia vartotojams greitai ir lengvai pasirinkti spalvas savo programoms. Taip pat galite padaryti spalvų parinkiklį patogesnį vartotojui naudodami Tailwind CSS.