Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Värivalitsimen lisääminen React-sovellukseen voi helpottaa käyttäjien päättämistä haluamistaan ​​väreistä. Värinvalitsimet ovat loistava työkalu käyttäjille, jotka työskentelevät grafiikkasovelluksen tai minkä tahansa mukauttamista tukevan sovelluksen kanssa.

React-color -kirjasto tarjoaa laajan valikoiman vaihtoehtoja ja monia värinvalitsintyylejä tarpeisiisi.

Värivalitsimen lisääminen sovellukseesi

React-värikirjaston avulla on helppo lisätä värivalitsin React-sovellukseesi. Tämä kirjasto tarjoaa käyttäjille yksinkertaisen ja intuitiivisen tavan valita värit sovelluksiinsa. Koodi on helppokäyttöinen ja tarjoaa erinomaisen käyttökokemuksen. Ennen kuin lisäät värivalitsimen, sinun on ensin Luo yksinkertainen reagointisovellus.

Reaktiovärin yleiskatsaus

React-värikirjasto on loistava tapa lisätä värivalitsin React-sovellukseesi. Se tarjoaa helppokäyttöisen käyttöliittymän, jonka avulla käyttäjät voivat valita useista väreistä. Kirjasto tarjoaa myös rekvisiitta, jonka avulla voit mukauttaa värivalitsinta.

Koodi värivalitsimen lisäämiseksi React-sovellukseesi on yksinkertainen. Jos haluat käyttää react-color -kirjastoa, sinun on ensin asennettava kirjasto käyttämällä npm, Node.js: n paketinhallinta.

npm reagoin väriin

Lisää sitten seuraava koodi komponenttiin, jonka haluat näyttää värivalitsimen:

tuonti Reagoi alkaen'reagoi'
tuonti { SketchPicker } alkaen"reagoi väri"
luokkaaKomponenttiulottuuReagoi.Komponentti{
 render() {
palata<SketchPicker />
 }
}
viedäoletuksena Komponentti

Yllä oleva koodi tekee perusvärivalitsimen. Sen avulla käyttäjät voivat valita useista väreistä. Valitsin näyttää myös valitun värin HEX-koodin, jota voit käyttää sovelluksesi muissa osissa.

Rekvisiitta saatavilla

React-color kirjasto tarjoaa rekvisiitta värinvalitsimen mukauttamiseen. Voit käyttää näitä rekvisiitta muuttamaan poimijan kokoa, saatavilla olevia värejä ja paljon muuta.

Alla on saatavilla olevat rekvisiitta Color Pickeriin:

  • leveys: Värivalitsimen leveys pikseleinä.
  • korkeus: Värivalitsimen korkeus pikseleinä.
  • väri: Valitsimen alkuväri.
  • onChange: Takaisinsoittotoiminto, joka toimii, kun väri muuttuu.
  • onChangeComplete: Takaisinsoittotoiminto, joka suoritetaan, kun värinvaihto on valmis.

Seuraava koodi näyttää, kuinka voit käyttää kaikkia Color Pickerin käytettävissä olevia rekvisiitta:

tuonti Reagoi alkaen'reagoi'
tuonti { SketchPicker } alkaen"reagoi väri"

luokkaaKomponenttiulottuuReagoi.Komponentti{

 render() {
palata (
 leveys={200}
 korkeus={200}
 väri ="#ff0000"
 onChange={(väri) => konsoli.log (väri)}
 onChangeComplete={(väri, tapahtuma)=> konsoli.log (väri)}
 />
 )
 }
}
viedäoletuksena Komponentti

Yllä oleva koodi renderöi värivalitsimen, jonka leveys on 200 kuvapistettä, korkeus 200 kuvapistettä, alkuväri #ff0000 ja väripaletti. Se näyttää myös värikoodin syöttökentän ja alfakanavan. Kun väri muuttuu, se soittaa onChangen takaisinsoittoon ja kirjaa uuden värin konsoliin.

Lisää värivalitsijoita

React-color -kirjasto tarjoaa valikoiman erilaisia ​​värivalimia, joista voit valita, ja viimeisessä osiossa käytetyn SketchPickerin lisäksi voit käyttää myös ChromePickeriä.

Tuo ChromePicker samalla tavalla kuin SketchPicker:

tuonti { ChromePicker } alkaen"reagoi väri";

Kun olet tuonut ChromePickerin, voit käyttää sitä sovelluksessasi lisäämällä seuraavan koodin:

 väri={ Tämä.state.background }
 onChangeComplete={ Tämä.handleChangeComplete }
 disableAlpha={totta}
/>

ChromePicker käyttää samat rekvisiitta kuin SketchPicker, mutta siinä on myös muutamia lisävaihtoehtoja, kuten mahdollisuus poistaa alfakanava käytöstä, minkä voit tehdä disableAlpha-propulla. Voit myös asettaa värin suoraan väripotilla.

React-color -kirjastossa on myös muita värivalitsijoita, kuten Block, Twitter ja GitHub. Jokaisella näistä keräilijöistä on omat rekvisiittansa, joten muista tarkistaa asiakirjoista lisätietoja.

Paranna käyttökokemustasi värivalitsimella

Värivalitsimen lisääminen React-sovellukseesi on loistava tapa parantaa käyttökokemusta. Sen avulla käyttäjät voivat nopeasti ja helposti valita värit sovelluksiinsa. Voit myös tehdä värinvalitsimesta käyttäjäystävällisemmän Tailwind CSS: n avulla.