Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Att lägga till en färgväljare i en React-app kan göra det mycket lättare för användare att fatta beslut om de färger de vill använda. Färgväljare är ett utmärkt verktyg för användare som arbetar med ett grafikprogram eller någon app som stöder anpassning.

React-color-biblioteket erbjuder ett brett utbud av alternativ och många färgväljarstilar för att passa dina behov.

Lägga till en färgväljare till din app

React-color-biblioteket gör det enkelt att lägga till en färgväljare till din React-app. Detta bibliotek erbjuder ett enkelt och intuitivt sätt för användare att välja färger för sina applikationer. Koden är enkel att använda och ger en fantastisk användarupplevelse. Innan du lägger till en färgväljare måste du först skapa en enkel reagera app.

En översikt över reaktionsfärg

React-color-biblioteket är ett utmärkt sätt att lägga till en färgväljare i din React-app. Den erbjuder ett lättanvänt gränssnitt som låter användare välja från en rad färger. Biblioteket tillhandahåller också rekvisita som du kan använda för att anpassa färgväljaren.

instagram viewer

Koden för att lägga till en färgväljare till din React-app är enkel. För att använda react-color-biblioteket måste du först installera biblioteket med hjälp av npm, pakethanteraren för Node.js.

npm jag reagerar-färg

Lägg sedan till följande kod till den komponent du vill visa färgväljaren:

importera Reagera från'reagera'
importera { SketchPicker } från'reagera-färg'
klassKomponentsträcker sigReagera.Komponent{
 framställa() {
lämna tillbaka<SketchPicker />
 }
}
exporterastandard Komponent

Ovanstående kod kommer att göra en grundläggande färgväljare. Det kommer att tillåta användare att välja från en rad färger. Väljaren kommer också att visa HEX-koden för den valda färgen, som du kan använda i andra delar av din app.

Tillgängliga rekvisita

React-color-biblioteket tillhandahåller rekvisita för att anpassa färgväljaren. Du kan använda dessa rekvisita för att ändra storleken på väljaren, tillgängliga färger och mycket mer.

Nedan finns tillgängliga rekvisita för färgväljaren:

  • bredd: Färgväljarens bredd i pixlar.
  • höjd: Färgväljarens höjd i pixlar.
  • Färg: Väljarens ursprungliga färg.
  • på Ändra: En återuppringningsfunktion som körs när färgen ändras.
  • onChangeComplete: En återuppringningsfunktion som körs när färgbytet är klart.

Följande kod visar hur du använder alla tillgängliga rekvisita för färgväljaren:

importera Reagera från'reagera'
importera { SketchPicker } från'reagera-färg'

klassKomponentsträcker sigReagera.Komponent{

 framställa() {
lämna tillbaka (
 bredd={200}
 höjd={200}
 färg="#ff0000"
 onChange={(färg) => trösta.log (färg)}
 onChangeComplete={(färg, händelse)=> trösta.log (färg)}
 />
 )
 }
}
exporterastandard Komponent

Ovanstående kod kommer att återge en färgväljare med en bredd på 200px, en höjd på 200px, en initial färg på #ff0000 och en palett med färger. Den visar också ett inmatningsfält för färgkoden och visar alfakanalen. När färgen ändras anropar den onChange-återuppringningen och loggar den nya färgen till konsolen.

Lägga till ytterligare färgväljare

React-color-biblioteket erbjuder en rad olika färgväljare att välja mellan, och förutom SketchPicker som användes i det sista avsnittet kan du också använda ChromePicker.

Importera ChromePicker på samma sätt som du importerade SketchPicker:

importera { ChromePicker } från'reagera-färg';

När du har importerat ChromePicker kan du använda den i din app genom att lägga till följande kod:

 färg={ detta.state.bakgrund }
 onChangeComplete={ detta.handleChangeComplete }
 disableAlpha={Sann}
/>

ChromePicker tar samma rekvisita som SketchPicker, men har också några ytterligare alternativ, såsom möjligheten att inaktivera alfakanalen, vilket du kan göra med disableAlpha prop. Du kan också ställa in färgen direkt med färgpropet.

Det finns också andra färgväljare tillgängliga i react-color-biblioteket, som Block, Twitter och GitHub. Var och en av dessa plockare har sin egen rekvisita, så se till att kontrollera dokumentationen för mer information.

Förbättra din användarupplevelse med en färgväljare

Att lägga till en färgväljare i din React-app är ett bra sätt att förbättra användarupplevelsen. Det tillåter användare att snabbt och enkelt välja färger för sina applikationer. Du kan också göra färgväljaren mer användarvänlig med hjälp av Tailwind CSS.