Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Добавянето на инструмент за избор на цвят към приложение на React може да направи много по-лесно за потребителите да вземат решения относно цветовете, които искат да използват. Инструментите за избор на цвят са чудесен инструмент за потребители, работещи с графично приложение или друго приложение, което поддържа персонализиране.

Библиотеката react-color предлага широка гама от опции и много стилове за избор на цвят, които да отговарят на вашите нужди.

Добавяне на инструмент за избор на цвят към вашето приложение

Библиотеката react-color улеснява добавянето на инструмент за избор на цвят към вашето приложение React. Тази библиотека предоставя лесен и интуитивен начин за потребителите да избират цветове за своите приложения. Кодът е лесен за използване и осигурява страхотно потребителско изживяване. Преди да добавите инструмент за избор на цвят, първо трябва създайте просто приложение за реакция.

instagram viewer

Общ преглед на цвета на реакцията

Библиотеката react-color е чудесен начин да добавите инструмент за избор на цвят към вашето приложение React. Той предлага лесен за използване интерфейс, който позволява на потребителите да избират от набор от цветове. Библиотеката също така предоставя подпори, които можете да използвате, за да персонализирате инструмента за избор на цвят.

Кодът за добавяне на инструмент за избор на цвят към вашето приложение React е ясен. За да използвате библиотеката react-color, първо трябва да инсталирате библиотеката с помощта на npm, мениджърът на пакети за Node.js.

npm реагирам-цвят

След това просто добавете следния код към компонента, който искате да покажете в инструмента за избор на цвят:

импортиране Реагирайте от"реагира"
импортиране {SketchPicker} от'react-color'
класКомпонентсе простираРеагирайте.Компонент{
 рендер() {
връщане<SketchPicker />
 }
}
износпо подразбиране Компонент

Горният код ще изобрази основен избор на цвят. Това ще позволи на потребителите да избират от гама от цветове. Инструментът за избор ще покаже и HEX кода на избрания цвят, който можете да използвате в други части на вашето приложение.

Наличен реквизит

Библиотеката react-color предоставя подпори за персонализиране на инструмента за избор на цвят. Можете да използвате тези подпори, за да промените размера на инструмента за избор, наличните цветове и много повече.

По-долу са наличните подпори за Color Picker:

  • ширина: Ширината на инструмента за избор на цвят в пиксели.
  • височина: Височината на инструмента за избор на цвят в пиксели.
  • цвят: Първоначалният цвят на селектора.
  • onChange: Функция за обратно извикване, която се изпълнява, когато цветът се промени.
  • onChangeComplete: Функция за обратно извикване, която се изпълнява, когато промяната на цвета завърши.

Следният код показва как да използвате всички налични реквизити за Color Picker:

импортиране Реагирайте от"реагира"
импортиране {SketchPicker} от'react-color'

класКомпонентсе простираРеагирайте.Компонент{

 рендер() {
връщане (
 ширина={200}
 височина={200}
 цвят="#ff0000"
 onChange={(цвят) => конзола.log (цвят)}
 onChangeComplete={(цвят, събитие)=> конзола.log (цвят)}
 />
 )
 }
}
износпо подразбиране Компонент

Горният код ще изобрази инструмент за избор на цвят с ширина 200px, височина 200px, начален цвят #ff0000 и палитра от цветове. Той също така ще покаже поле за въвеждане на цветовия код и ще покаже алфа канала. Когато цветът се промени, той ще извика обратното извикване onChange и ще регистрира новия цвят в конзолата.

Добавяне на допълнителни инструменти за избор на цвят

Библиотеката react-color предоставя набор от различни инструменти за избор на цвят, от които да избирате, и в допълнение към SketchPicker, използван в последния раздел, можете също да използвате ChromePicker.

Импортирайте ChromePicker по същия начин, по който сте импортирали SketchPicker:

импортиране { ChromePicker } от'react-color';

След като импортирате ChromePicker, можете да го използвате в приложението си, като добавите следния код:

 цвят={ това.state.background}
 onChangeComplete={ това.handleChangeComplete}
 disableAlpha={вярно}
/>

ChromePicker приема същите подпори като SketchPicker, но има и няколко допълнителни опции, като например възможността да деактивирате алфа канала, което можете да направите с проп disableAlpha. Можете също да зададете цвета директно с цветната опора.

Има и други инструменти за избор на цвят, налични в библиотеката на react-color, като Block, Twitter и GitHub. Всеки от тези пикери има свои собствени подпори, така че не забравяйте да проверите документацията за повече информация.

Подобрете вашето потребителско изживяване с инструмент за избор на цвят

Добавянето на инструмент за избор на цвят към вашето приложение React е чудесен начин да подобрите потребителското изживяване. Тя позволява на потребителите бързо и лесно да избират цветове за своите приложения. Можете също така да направите инструмента за избор на цвят по-удобен за потребителя, като използвате CSS на Tailwind.