Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Přidání výběru barev do aplikace React může uživatelům výrazně usnadnit rozhodování o barvách, které chtějí použít. Výběr barev je skvělým nástrojem pro uživatele pracující s grafickou aplikací nebo jakoukoli aplikací, která podporuje personalizaci.

Knihovna reakčních barev nabízí širokou škálu možností a mnoho stylů pro výběr barev, které vyhovují vašim potřebám.

Přidání nástroje pro výběr barvy do aplikace

Knihovna reakčních barev usnadňuje přidání nástroje pro výběr barvy do aplikace React. Tato knihovna poskytuje uživatelům jednoduchý a intuitivní způsob výběru barev pro jejich aplikace. Kód se snadno používá a poskytuje skvělé uživatelské prostředí. Než přidáte výběr barvy, musíte to udělat vytvořit jednoduchou aplikaci pro reakce.

Přehled reakčních barev

Knihovna reakčních barev je skvělý způsob, jak do aplikace React přidat výběr barev. Nabízí snadno použitelné rozhraní, které uživatelům umožňuje vybrat si z řady barev. Knihovna také poskytuje rekvizity, které můžete použít k přizpůsobení výběru barvy.

instagram viewer

Kód pro přidání výběru barvy do vaší aplikace React je jednoduchý. Chcete-li použít knihovnu Reag-color, musíte nejprve nainstalovat knihovnu pomocí npm, správce balíčků pro Node.js.

npm i reagovat-barva

Poté jednoduše přidejte následující kód do komponenty, pro kterou chcete zobrazit výběr barvy:

import Reagovat z'reagovat'
import { SketchPicker } z'react-color'
třídaKomponentrozšiřujeReagovat.Komponent{
 poskytnout() {
vrátit se<SketchPicker />
 }
}
vývoznívýchozí Komponent

Výše uvedený kód vykreslí základní výběr barvy. Umožní uživatelům vybrat si z řady barev. Výběr také zobrazí HEX kód vybrané barvy, který můžete použít v jiných částech své aplikace.

Dostupné rekvizity

Knihovna reakčních barev poskytuje rekvizity pro přizpůsobení výběru barvy. Pomocí těchto rekvizit můžete změnit velikost sběrače, dostupné barvy a mnoho dalšího.

Níže jsou dostupné rekvizity pro výběr barvy:

  • šířka: Šířka pro výběr barvy v pixelech.
  • výška: Výška nástroje pro výběr barvy v pixelech.
  • barva: Počáteční barva voliče.
  • při změně: Funkce zpětného volání, která se spustí při změně barvy.
  • onChangeComplete: Funkce zpětného volání, která se spustí po dokončení změny barvy.

Následující kód ukazuje, jak používat všechny dostupné rekvizity pro výběr barvy:

import Reagovat z'reagovat'
import { SketchPicker } z'react-color'

třídaKomponentrozšiřujeReagovat.Komponent{

 poskytnout() {
vrátit se (
 šířka={200}
 výška={200}
 barva="#ff0000"
 onChange={(color) => řídicí panel.log (barva)}
 onChangeComplete={(barva, událost)=> řídicí panel.log (barva)}
 />
 )
 }
}
vývoznívýchozí Komponent

Výše uvedený kód vykreslí výběr barvy o šířce 200px, výšce 200px, počáteční barvě #ff0000 a paletě barev. Zobrazí se také vstupní pole pro kód barvy a zobrazí se alfa kanál. Když se barva změní, zavolá zpětné volání onChange a přihlásí novou barvu do konzoly.

Přidání dalších výběrů barev

Knihovna reakčních barev poskytuje řadu různých výběrů barev, ze kterých si můžete vybrat, a kromě nástroje SketchPicker použitého v poslední sekci můžete použít také nástroj ChromePicker.

Importujte ChromePicker stejným způsobem, jakým jste importovali SketchPicker:

import { ChromePicker } z'react-color';

Jakmile nástroj ChromePicker importujete, můžete jej použít ve své aplikaci přidáním následujícího kódu:

 barva={ tento.state.background }
 onChangeComplete={ tento.handleChangeComplete }
 zakázatAlpha={skutečný}
/>

ChromePicker využívá stejné rekvizity jako SketchPicker, ale má také několik dalších možností, jako je možnost deaktivovat alfa kanál, což můžete provést pomocí rekvizity disableAlpha. Barvu můžete také nastavit přímo pomocí barevné rekvizity.

V knihovně reakčních barev jsou k dispozici také další nástroje pro výběr barev, jako je Block, Twitter a GitHub. Každý z těchto sběračů má své vlastní rekvizity, takže se ujistěte, že najdete další informace v dokumentaci.

Vylepšete své uživatelské prostředí pomocí nástroje pro výběr barvy

Přidání výběru barvy do aplikace React je skvělý způsob, jak zlepšit uživatelský dojem. Umožňuje uživatelům rychle a snadno vybrat barvy pro jejich aplikace. Pomocí CSS Tailwind můžete také vytvořit uživatelsky přívětivější výběr barvy.