Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Adăugarea unui selector de culori la o aplicație React poate facilita utilizatorilor să ia decizii cu privire la culorile pe care doresc să le folosească. Selectorii de culoare sunt un instrument excelent pentru utilizatorii care lucrează cu o aplicație grafică sau orice aplicație care acceptă personalizarea.

Biblioteca react-color oferă o gamă largă de opțiuni și multe stiluri de selectare a culorilor pentru a se potrivi nevoilor dumneavoastră.

Adăugarea unui selector de culoare în aplicația dvs

Biblioteca react-color facilitează adăugarea unui selector de culoare în aplicația dvs. React. Această bibliotecă oferă utilizatorilor o modalitate simplă și intuitivă de a selecta culorile pentru aplicațiile lor. Codul este simplu de utilizat și oferă o experiență excelentă pentru utilizator. Înainte de a adăuga un selector de culoare, trebuie mai întâi creați o aplicație simplă de reacție.

instagram viewer

O prezentare generală a react-color

Biblioteca react-color este o modalitate excelentă de a adăuga un selector de culoare în aplicația dvs. React. Oferă o interfață ușor de utilizat, care permite utilizatorilor să aleagă dintr-o gamă de culori. Biblioteca oferă, de asemenea, elemente de recuzită pe care le puteți folosi pentru a personaliza selectorul de culori.

Codul pentru a adăuga un selector de culoare în aplicația React este simplu. Pentru a utiliza biblioteca react-color, mai întâi trebuie să instalați biblioteca folosind npm, managerul de pachete pentru Node.js.

npm i react-color

Apoi, pur și simplu adăugați următorul cod la componenta pe care doriți să o afișați selectorul de culori:

import Reacţiona din'reacţiona'
import { SketchPicker } din"reacție-culoare"
clasăComponentăse extindeReacţiona.Componentă{
 randa() {
întoarcere<SketchPicker />
 }
}
exportMod implicit Componentă

Codul de mai sus va reda un selector de culoare de bază. Acesta va permite utilizatorilor să aleagă dintr-o gamă de culori. Selectorul va afișa și codul HEX al culorii selectate, pe care îl puteți utiliza în alte părți ale aplicației dvs.

Recuzită disponibilă

Biblioteca react-color oferă elemente de recuzită pentru a personaliza selectorul de culori. Puteți folosi aceste elemente de recuzită pentru a schimba dimensiunea selectorului, culorile disponibile și multe altele.

Mai jos sunt elementele de recuzită disponibile pentru Color Picker:

  • lăţime: lățimea selectorului de culori în pixeli.
  • înălţime: Înălțimea selectorului de culori în pixeli.
  • culoare: Culoarea inițială a selectorului.
  • cu privire la schimbările: O funcție de apel invers care rulează atunci când culoarea se schimbă.
  • onChangeComplete: O funcție de apel invers care rulează când schimbarea culorii se încheie.

Următorul cod arată cum să utilizați toate elementele de recuzită disponibile pentru Color Picker:

import Reacţiona din'reacţiona'
import { SketchPicker } din"reacție-culoare"

clasăComponentăse extindeReacţiona.Componentă{

 randa() {
întoarcere (
 lățime={200}
 înălțime={200}
 culoare=„#ff0000”
 onChange={(culoare) => consolă.log (culoare)}
 onChangeComplete={(culoare, eveniment) => consolă.log (culoare)}
 />
 )
 }
}
exportMod implicit Componentă

Codul de mai sus va reda un selector de culori cu o lățime de 200 px, o înălțime de 200 px, o culoare inițială de #ff0000 și o paletă de culori. De asemenea, va afișa un câmp de introducere pentru codul de culoare și va afișa canalul alfa. Când culoarea se schimbă, va apela apelul onChange și va înregistra noua culoare pe consolă.

Adăugarea unor selectori de culori suplimentare

Biblioteca react-color oferă o gamă de selecție de culori diferite din care să alegeți și, pe lângă SketchPicker folosit în ultima secțiune, puteți utiliza și ChromePicker.

Importați ChromePicker în același mod în care ați importat SketchPicker:

import { ChromePicker } din"reacție-culoare";

După ce ați importat ChromePicker, îl puteți utiliza în aplicația dvs. adăugând următorul cod:

 culoare={ acest.stat.fond }
 onChangeComplete={ acest.handleChangeComplete }
 disableAlpha={Adevărat}
/>

ChromePicker are aceleași elemente de recuzită ca și SketchPicker, dar are și câteva opțiuni suplimentare, cum ar fi capacitatea de a dezactiva canalul alfa, pe care o puteți face cu ajutorul dispozitivului disableAlpha. De asemenea, puteți seta culoarea direct cu suportul de culoare.

Există, de asemenea, alți selecționatori de culori disponibile în biblioteca react-color, cum ar fi Block, Twitter și GitHub. Fiecare dintre acești culegători are propriile elemente de recuzită, așa că asigurați-vă că verificați documentația pentru mai multe informații.

Îmbunătățiți-vă experiența utilizatorului cu un selector de culoare

Adăugarea unui selector de culoare în aplicația dvs. React este o modalitate excelentă de a îmbunătăți experiența utilizatorului. Permite utilizatorilor să selecteze rapid și ușor culorile pentru aplicațiile lor. De asemenea, puteți face selectorul de culori mai ușor de utilizat folosind CSS Tailwind.