Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Krāsu atlasītāja pievienošana React lietotnei var ievērojami atvieglot lietotāju lēmumu pieņemšanu par krāsām, kuras viņi vēlas izmantot. Krāsu atlasītāji ir lielisks rīks lietotājiem, kuri strādā ar grafikas lietojumprogrammu vai jebkuru lietotni, kas atbalsta personalizāciju.

React-color bibliotēka piedāvā plašu iespēju klāstu un daudzus krāsu atlasītāju stilus atbilstoši jūsu vajadzībām.

Krāsu atlasītāja pievienošana jūsu lietotnei

React-color bibliotēka ļauj viegli pievienot krāsu atlasītāju savai React lietotnei. Šī bibliotēka nodrošina vienkāršu un intuitīvu veidu, kā lietotāji var izvēlēties krāsas savām lietojumprogrammām. Kods ir vienkārši lietojams un nodrošina lielisku lietotāja pieredzi. Pirms krāsu atlasītāja pievienošanas vispirms tas ir jādara izveidojiet vienkāršu reaģēšanas lietotni.

Pārskats par reaģējošu krāsu

React krāsu bibliotēka ir lielisks veids, kā savai React lietotnei pievienot krāsu atlasītāju. Tas piedāvā viegli lietojamu interfeisu, kas ļauj lietotājiem izvēlēties no dažādām krāsām. Bibliotēkā ir arī rekvizīti, kurus varat izmantot, lai pielāgotu krāsu atlasītāju.

instagram viewer

Kods krāsu atlasītāja pievienošanai React lietotnei ir vienkāršs. Lai izmantotu react-color bibliotēku, vispirms jāinstalē bibliotēka, izmantojot npm, Node.js pakotņu pārvaldnieks.

npm es reaģēju-krāsa

Pēc tam vienkārši pievienojiet šādu kodu komponentam, kuram vēlaties parādīt krāsu atlasītāju:

imports Reaģēt no'reaģēt'
imports { SketchPicker } no"reaģēt krāsa"
klasēKomponentspagarinaReaģēt.Komponents{
 render() {
atgriezties<SketchPicker />
 }
}
eksportētnoklusējuma Komponents

Iepriekš minētais kods atveidos pamata krāsu atlasītāju. Tas ļaus lietotājiem izvēlēties no dažādām krāsām. Izvēlētājs parādīs arī atlasītās krāsas HEX kodu, ko varat izmantot citās lietotnes daļās.

Pieejamie rekvizīti

React-color bibliotēka nodrošina rekvizītus krāsu atlasītāja pielāgošanai. Varat izmantot šos piederumus, lai mainītu atlasītāja izmēru, pieejamās krāsas un daudz ko citu.

Zemāk ir pieejami krāsu atlasītāja rekvizīti:

  • platums: krāsu atlasītāja platums pikseļos.
  • augstums: krāsu atlasītāja augstums pikseļos.
  • krāsa: atlasītāja sākotnējā krāsa.
  • onChange: atzvanīšanas funkcija, kas darbojas, mainoties krāsai.
  • onChangeComplete: atzvanīšanas funkcija, kas darbojas, kad krāsas maiņa ir pabeigta.

Šis kods parāda, kā izmantot visus Krāsu atlasītājam pieejamos rekvizītus:

imports Reaģēt no'reaģēt'
imports { SketchPicker } no"reaģēt krāsa"

klasēKomponentspagarinaReaģēt.Komponents{

 render() {
atgriezties (
 platums={200}
 augstums={200}
 krāsa ="#ff0000"
 onChange={(krāsa) => konsole.log (krāsa)}
 onChangeComplete={(krāsa, notikums)=> konsole.log (krāsa)}
 />
 )
 }
}
eksportētnoklusējuma Komponents

Iepriekš minētais kods atveidos krāsu atlasītāju ar platumu 200 pikseļi, augstumu 200 pikseļi, sākotnējo krāsu #ff0000 un krāsu paleti. Tajā tiks parādīts arī krāsu koda ievades lauks un alfa kanāls. Kad krāsa mainās, tas izsauks onChange atzvanīšanu un reģistrēs jauno krāsu konsolē.

Papildu krāsu atlasītāju pievienošana

Reakcijas krāsu bibliotēka nodrošina dažādu krāsu atlasītāju klāstu, un papildus pēdējā sadaļā izmantotajam SketchPicker varat izmantot arī ChromePicker.

Importējiet ChromePicker tādā pašā veidā, kā importējāt SketchPicker:

imports { ChromePicker } no"reaģēt krāsa";

Kad esat importējis ChromePicker, varat to izmantot savā lietotnē, pievienojot šādu kodu:

 krāsa={ šis.state.background }
 onChangeComplete={ šis.handleChangeComplete }
 disableAlpha={taisnība}
/>

ChromePicker izmanto tos pašus rekvizītus kā SketchPicker, taču tam ir arī dažas papildu opcijas, piemēram, iespēja atspējot alfa kanālu, ko varat darīt ar disableAlpha prop. Varat arī iestatīt krāsu tieši ar krāsu balstu.

Reakcijas krāsu bibliotēkā ir pieejami arī citi krāsu atlasītāji, piemēram, Block, Twitter un GitHub. Katram no šiem atlasītājiem ir savi piederumi, tāpēc noteikti pārbaudiet dokumentāciju, lai iegūtu plašāku informāciju.

Uzlabojiet savu lietotāja pieredzi, izmantojot krāsu atlasītāju

Krāsu atlasītāja pievienošana React lietotnei ir lielisks veids, kā uzlabot lietotāja pieredzi. Tas ļauj lietotājiem ātri un viegli izvēlēties krāsas savām lietojumprogrammām. Varat arī padarīt krāsu atlasītāju lietotājam draudzīgāku, izmantojot Tailwind CSS.