Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Å legge til en fargevelger i en React-app kan gjøre det mye enklere for brukere å ta avgjørelser om fargene de vil bruke. Fargevelgere er et flott verktøy for brukere som arbeider med et grafikkprogram eller en hvilken som helst app som støtter personalisering.

React-color-biblioteket tilbyr et bredt spekter av alternativer og mange fargevelgerstiler som passer dine behov.

Legge til en fargevelger i appen din

React-fargebiblioteket gjør det enkelt å legge til en fargevelger i React-appen din. Dette biblioteket gir en enkel og intuitiv måte for brukere å velge farger for sine applikasjoner. Koden er enkel å bruke og gir en flott brukeropplevelse. Før du legger til en fargevelger, må du først lag en enkel reaksjonsapp.

En oversikt over reaksjonsfarge

React-fargebiblioteket er en fin måte å legge til en fargevelger i React-appen din. Den tilbyr et brukervennlig grensesnitt som lar brukere velge fra en rekke farger. Biblioteket har også rekvisitter som du kan bruke til å tilpasse fargevelgeren.

instagram viewer

Koden for å legge til en fargevelger i React-appen din er enkel. For å bruke react-color-biblioteket, må du først installere biblioteket med npm, pakkebehandleren for Node.js.

npm jeg reagerer-farge

Deretter legger du bare til følgende kode til komponenten du vil vise fargevelgeren:

import Reagere fra'reagere'
import { SketchPicker } fra'reager-farge'
klasseKomponentstrekkerReagere.Komponent{
 render() {
komme tilbake<SketchPicker />
 }
}
eksportmisligholde Komponent

Koden ovenfor vil gjengi en grunnleggende fargevelger. Det vil tillate brukere å velge fra en rekke farger. Velgeren vil også vise HEX-koden til den valgte fargen, som du kan bruke i andre deler av appen din.

Tilgjengelige rekvisitter

React-color-biblioteket gir rekvisitter for å tilpasse fargevelgeren. Du kan bruke disse rekvisittene til å endre størrelsen på velgeren, tilgjengelige farger og mye mer.

Nedenfor er tilgjengelige rekvisitter for fargevelgeren:

  • bredde: Bredden på fargevelgeren i piksler.
  • høyde: Høyden på fargevelgeren i piksler.
  • farge: Startfargen på velgeren.
  • på Endre: En tilbakeringingsfunksjon som kjører når fargen endres.
  • onChangeComplete: En tilbakeringingsfunksjon som kjører når fargeendringen er fullført.

Følgende kode viser hvordan du bruker alle tilgjengelige rekvisitter for fargevelgeren:

import Reagere fra'reagere'
import { SketchPicker } fra'reager-farge'

klasseKomponentstrekkerReagere.Komponent{

 render() {
komme tilbake (
 width={200}
 høyde={200}
 farge="#ff0000"
 onChange={(farge) => konsoll.log (farge)}
 onChangeComplete={(farge, hendelse)=> konsoll.log (farge)}
 />
 )
 }
}
eksportmisligholde Komponent

Koden ovenfor vil gjengi en fargevelger med en bredde på 200px, en høyde på 200px, en startfarge på #ff0000 og en palett med farger. Den vil også vise et inndatafelt for fargekoden og viser alfakanalen. Når fargen endres, vil den kalle onChange tilbakeringing og logge den nye fargen til konsollen.

Legger til flere fargevelgere

React-color-biblioteket gir en rekke forskjellige fargevelgere å velge mellom, og i tillegg til SketchPicker som ble brukt i den siste delen, kan du også bruke ChromePicker.

Importer ChromePicker på samme måte som du importerte SketchPicker:

import { ChromePicker } fra'reager-farge';

Når du har importert ChromePicker, kan du bruke den i appen din ved å legge til følgende kode:

 farge={ dette.state.bakgrunn }
 onChangeComplete={ dette.handleChangeComplete }
 disableAlpha={ekte}
/>

ChromePicker tar de samme rekvisittene som SketchPicker, men har også noen få tilleggsalternativer, for eksempel muligheten til å deaktivere alfakanalen, noe du kan gjøre med disableAlpha prop. Du kan også stille inn fargen direkte med fargerekvisitten.

Det er også andre fargevelgere tilgjengelig i react-color-biblioteket, for eksempel Block, Twitter og GitHub. Hver av disse plukkerne har sine egne rekvisitter, så sørg for å sjekke dokumentasjonen for mer informasjon.

Forbedre brukeropplevelsen din med en fargevelger

Å legge til en fargevelger i React-appen din er en fin måte å forbedre brukeropplevelsen på. Det lar brukere raskt og enkelt velge farger for applikasjonene sine. Du kan også gjøre fargevelgeren mer brukervennlig ved å bruke Tailwind CSS.