Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Värvivalija lisamine Reacti rakendusse võib muuta kasutajate jaoks kasutatavate värvide kohta otsuste tegemise palju lihtsamaks. Värvivalijad on suurepärane tööriist kasutajatele, kes töötavad graafikarakendusega või mis tahes isikupärastamist toetava rakendusega.

React-colori raamatukogu pakub laias valikus valikuid ja paljusid värvivalija stiile, mis sobivad teie vajadustega.

Värvivalija lisamine oma rakendusele

React-colori teegi abil on lihtne oma Reacti rakendusse värvivalija lisada. See raamatukogu pakub kasutajatele lihtsat ja intuitiivset viisi oma rakenduste jaoks värvide valimiseks. Koodi on lihtne kasutada ja see pakub suurepärast kasutuskogemust. Enne värvivalija lisamist peate esmalt seda tegema looge lihtne reageerimisrakendus.

Reaktsioonivärvi ülevaade

React-colori teek on suurepärane viis oma Reacti rakendusse värvivalija lisamiseks. See pakub lihtsalt kasutatavat liidest, mis võimaldab kasutajatel valida erinevate värvide hulgast. Teek pakub ka rekvisiite, mida saate kasutada värvivalija kohandamiseks.

instagram viewer

Kood värvivalija lisamiseks oma Reacti rakendusse on lihtne. React-color teegi kasutamiseks peate esmalt installima teegi kasutades npm, Node.js paketihaldur.

npm ma reageerin-värv

Seejärel lisage lihtsalt järgmine kood komponendile, mille värvivalijat soovite kuvada:

importida Reageerige alates'reageeri'
importida { SketchPicker } alates'reageeri värv'
klassKomponentulatubReageerige.Komponent{
 render() {
tagasi<SketchPicker />
 }
}
eksportidavaikimisi Komponent

Ülaltoodud kood renderdab põhivärvivalija. See võimaldab kasutajatel valida erinevate värvide hulgast. Valija kuvab ka valitud värvi HEX-koodi, mida saate kasutada oma rakenduse muudes osades.

Saadaval rekvisiidid

Reaktsioonivärvi raamatukogu pakub rekvisiite värvivalija kohandamiseks. Nende rekvisiitide abil saate muuta valija suurust, saadaolevaid värve ja palju muud.

Allpool on värvivalija jaoks saadaolevad rekvisiidid:

  • laius: värvivalija laius pikslites.
  • kõrgus: värvivalija kõrgus pikslites.
  • värvi: valija algvärv.
  • onChange: tagasihelistamisfunktsioon, mis töötab värvi muutumisel.
  • onChangeComplete: tagasihelistamisfunktsioon, mis käivitub, kui värvimuutus on lõppenud.

Järgmine kood näitab, kuidas kasutada kõiki värvivalija jaoks saadaolevaid rekvisiite:

importida Reageerige alates'reageeri'
importida { SketchPicker } alates'reageeri värv'

klassKomponentulatubReageerige.Komponent{

 render() {
tagasi (
 laius={200}
 kõrgus={200}
 värv ="#ff0000"
 onChange={(värv) => konsool.log (värv)}
 onChangeComplete={(värv, sündmus)=> konsool.log (värv)}
 />
 )
 }
}
eksportidavaikimisi Komponent

Ülaltoodud kood renderdab värvivalija laiusega 200px, kõrgusega 200px, algvärviga #ff0000 ja värvipaletiga. Samuti kuvab see värvikoodi sisestusvälja ja alfakanali. Kui värv muutub, helistab see onChange'i tagasihelistamisele ja logib uue värvi konsooli.

Täiendavate värvivalijate lisamine

React-colori teegis on valik erinevaid värvivalijaid ja lisaks viimases jaotises kasutatud SketchPickerile saate kasutada ka ChromePickerit.

Importige ChromePicker samamoodi nagu SketchPicker.

importida { ChromePicker } alates'reageeri värv';

Kui olete ChromePickeri importinud, saate seda oma rakenduses kasutada, lisades järgmise koodi.

 värv={ see.state.background }
 onChangeComplete={ see.handleChangeComplete }
 disableAlpha={tõsi}
/>

ChromePicker kasutab samu rekvisiite, mis SketchPicker, kuid sellel on ka mõned lisavõimalused, näiteks alfakanali keelamine, mida saate teha disableAlpha propiga. Värvi saab määrata ka otse värvirekvisiidiga.

Reaktsioonivärvi raamatukogus on saadaval ka muud värvivalijad, näiteks Block, Twitter ja GitHub. Igal neist korjajatest on oma rekvisiidid, seega vaadake lisateabe saamiseks kindlasti dokumentatsiooni.

Parandage oma kasutuskogemust värvivalijaga

Värvivalija lisamine oma Reacti rakendusse on suurepärane viis kasutajakogemuse parandamiseks. See võimaldab kasutajatel kiiresti ja lihtsalt oma rakenduste jaoks värve valida. Samuti saate Tailwind CSS-i abil muuta värvivalija kasutajasõbralikumaks.