Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Dodavanje alata za odabir boja React aplikaciji može znatno olakšati korisnicima donošenje odluka o bojama koje žele koristiti. Birači boja izvrstan su alat za korisnike koji rade s grafičkom aplikacijom ili bilo kojom aplikacijom koja podržava personalizaciju.

Knjižnica react-color nudi širok raspon opcija i mnoge stilove odabira boja koji odgovaraju vašim potrebama.

Dodavanje alata za odabir boja vašoj aplikaciji

Knjižnica react-color olakšava dodavanje birača boja vašoj React aplikaciji. Ova biblioteka pruža korisnicima jednostavan i intuitivan način odabira boja za svoje aplikacije. Kod je jednostavan za korištenje i pruža izvrsno korisničko iskustvo. Prije dodavanja alata za odabir boja, prvo trebate izradite jednostavnu aplikaciju za reakciju.

Pregled reakcije boje

Knjižnica react-color je sjajan način za dodavanje alata za odabir boja vašoj React aplikaciji. Nudi sučelje jednostavno za korištenje koje korisnicima omogućuje odabir iz niza boja. Knjižnica također nudi rekvizite koje možete koristiti za prilagodbu birača boja.

instagram viewer

Kod za dodavanje birača boja vašoj React aplikaciji je jednostavan. Da biste koristili biblioteku react-color, prvo morate instalirati biblioteku pomoću npm, upravitelj paketa za Node.js.

npm reagiram-boja

Zatim jednostavno dodajte sljedeći kod komponenti za koju želite da prikaže birač boja:

uvoz Reagirati iz'reagirati'
uvoz {SketchPicker} iz'react-color'
razredakomponentaproteže seReagirati.komponenta{
 render() {
povratak<SketchPicker />
 }
}
izvozzadano komponenta

Gornji kod će prikazati osnovni birač boja. Korisnicima će omogućiti odabir iz niza boja. Alat za odabir također će prikazati HEX kod odabrane boje, koji možete koristiti u drugim dijelovima svoje aplikacije.

Dostupni rekviziti

Knjižnica react-color pruža rekvizite za prilagodbu birača boja. Pomoću ovih rekvizita možete promijeniti veličinu alata za odabir, dostupne boje i još mnogo toga.

Ispod su dostupni rekviziti za Birač boja:

  • širina: Širina alata za odabir boja u pikselima.
  • visina: Visina birača boja u pikselima.
  • boja: Početna boja selektora.
  • onChange: Funkcija povratnog poziva koja se pokreće kada se boja promijeni.
  • onChangeComplete: Funkcija povratnog poziva koja se pokreće kada se završi promjena boje.

Sljedeći kôd pokazuje kako koristiti sve dostupne rekvizite za alat za odabir boja:

uvoz Reagirati iz'reagirati'
uvoz {SketchPicker} iz'react-color'

razredakomponentaproteže seReagirati.komponenta{

 render() {
povratak (
 širina={200}
 visina={200}
 boja="#ff0000"
 onChange={(boja) => konzola.log (boja)}
 onChangeComplete={(boja, događaj)=> konzola.log (boja)}
 />
 )
 }
}
izvozzadano komponenta

Gornji kod će prikazati birač boja sa širinom od 200px, visinom od 200px, početnom bojom #ff0000 i paletom boja. Također će prikazati polje za unos koda boje i prikazat će alfa kanal. Kada se boja promijeni, pozvat će onChange povratni poziv i zabilježiti novu boju u konzolu.

Dodavanje dodatnih birača boja

Knjižnica react-color nudi niz različitih birača boja koje možete izabrati, a uz SketchPicker korišten u posljednjem odjeljku, možete koristiti i ChromePicker.

Uvezite ChromePicker na isti način na koji ste uvezli SketchPicker:

uvoz { ChromePicker } iz'react-color';

Nakon što ste uvezli ChromePicker, možete ga koristiti u svojoj aplikaciji dodavanjem sljedećeg koda:

 boja={ ovaj.state.background }
 onChangeComplete={ ovaj.handleChangeComplete }
 disableAlpha={pravi}
/>

ChromePicker ima iste propise kao i SketchPicker, ali ima i nekoliko dodatnih opcija, kao što je mogućnost onemogućavanja alfa kanala, što možete učiniti s propsom disableAlpha. Boju možete postaviti i izravno s rekvizitom za boju.

U knjižnici react-color dostupni su i drugi birači boja, kao što su Block, Twitter i GitHub. Svaki od ovih berača ima svoje rekvizite, pa svakako provjerite dokumentaciju za više informacija.

Poboljšajte svoje korisničko iskustvo pomoću alata za odabir boja

Dodavanje alata za odabir boja vašoj aplikaciji React izvrstan je način za poboljšanje korisničkog iskustva. Korisnicima omogućuje brz i jednostavan odabir boja za njihove aplikacije. Također možete učiniti birač boja lakšim za korištenje koristeći Tailwind CSS.