Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Tilføjelse af en farvevælger til en React-app kan gøre det meget nemmere for brugerne at træffe beslutninger om de farver, de vil bruge. Farvevælgere er et fantastisk værktøj til brugere, der arbejder med et grafikprogram eller enhver app, der understøtter personalisering.

React-color biblioteket tilbyder en bred vifte af muligheder og mange farvevælger stilarter, der passer til dine behov.

Tilføjelse af en farvevælger til din app

React-color-biblioteket gør det nemt at tilføje en farvevælger til din React-app. Dette bibliotek giver brugere en enkel og intuitiv måde at vælge farver til deres applikationer på. Koden er enkel at bruge og giver en fantastisk brugeroplevelse. Før du tilføjer en farvevælger, skal du først oprette en simpel reagere app.

En oversigt over reaktionsfarve

React-color-biblioteket er en fantastisk måde at tilføje en farvevælger til din React-app. Det tilbyder en brugervenlig grænseflade, der giver brugerne mulighed for at vælge mellem en række farver. Biblioteket tilbyder også rekvisitter, som du kan bruge til at tilpasse farvevælgeren.

instagram viewer

Koden til at tilføje en farvevælger til din React-app er ligetil. For at bruge react-color biblioteket skal du først installere biblioteket vha npm, pakkehåndteringen for Node.js.

npm jeg reagere-farve

Derefter skal du blot tilføje følgende kode til den komponent, du vil have vist farvevælgeren:

importere Reagere fra'reagere'
importere { SketchPicker } fra'reager-farve'
klasseKomponentstrækker sigReagere.Komponent{
 render() {
Vend tilbage<SketchPicker />
 }
}
eksportStandard Komponent

Ovenstående kode vil gengive en grundlæggende farvevælger. Det giver brugerne mulighed for at vælge mellem en række farver. Vælgeren viser også HEX-koden for den valgte farve, som du kan bruge i andre dele af din app.

Tilgængelige rekvisitter

React-color biblioteket giver rekvisitter til at tilpasse farvevælgeren. Du kan bruge disse rekvisitter til at ændre størrelsen på vælgeren, de tilgængelige farver og meget mere.

Nedenfor er de tilgængelige rekvisitter til farvevælgeren:

  • bredde: Bredden af ​​farvevælgeren i pixels.
  • højde: Højden af ​​farvevælgeren i pixels.
  • farve: Vælgerens begyndelsesfarve.
  • på Skift: En tilbagekaldsfunktion, der kører, når farven ændres.
  • onChangeComplete: En tilbagekaldsfunktion, der kører, når farveskiftet er fuldført.

Følgende kode viser, hvordan du bruger alle tilgængelige rekvisitter til farvevælgeren:

importere Reagere fra'reagere'
importere { SketchPicker } fra'reager-farve'

klasseKomponentstrækker sigReagere.Komponent{

 render() {
Vend tilbage (
 bredde={200}
 højde={200}
 farve="#ff0000"
 onChange={(farve) => konsol.log (farve)}
 onChangeComplete={(farve, hændelse)=> konsol.log (farve)}
 />
 )
 }
}
eksportStandard Komponent

Ovenstående kode vil gengive en farvevælger med en bredde på 200px, en højde på 200px, en startfarve på #ff0000 og en palet af farver. Det vil også vise et inputfelt for farvekoden og vil vise alfakanalen. Når farven ændres, kalder den onChange-tilbagekaldet og logger den nye farve til konsollen.

Tilføjelse af yderligere farvevælgere

React-color-biblioteket giver en række forskellige farvevælgere at vælge imellem, og udover SketchPicker, der blev brugt i sidste afsnit, kan du også bruge ChromePicker.

Importer ChromePicker på samme måde, som du importerede SketchPicker:

importere { ChromePicker } fra'reager-farve';

Når du har importeret ChromePicker, kan du bruge den i din app ved at tilføje følgende kode:

 farve={ det her.state.baggrund }
 onChangeComplete={ det her.handleChangeComplete }
 disableAlpha={rigtigt}
/>

ChromePicker tager de samme rekvisitter som SketchPicker, men har også et par ekstra muligheder, såsom muligheden for at deaktivere alfakanalen, hvilket du kan gøre med disableAlpha prop. Du kan også indstille farven direkte med farvepropen.

Der er også andre farvevælgere tilgængelige i react-color-biblioteket, såsom Block, Twitter og GitHub. Hver af disse plukkere har sine egne rekvisitter, så sørg for at tjekke dokumentationen for mere information.

Forbedre din brugeroplevelse med en farvevælger

Tilføjelse af en farvevælger til din React-app er en fantastisk måde at forbedre brugeroplevelsen på. Det giver brugerne mulighed for hurtigt og nemt at vælge farver til deres applikationer. Du kan også gøre farvevælgeren mere brugervenlig ved at bruge Tailwind CSS.