Читаоци попут вас помажу у подршци МУО. Када обавите куповину користећи везе на нашем сајту, можда ћемо зарадити провизију за партнере. Опширније.

Додавање бирача боја у апликацију Реацт може знатно олакшати корисницима доношење одлука о бојама које желе да користе. Бирачи боја су одличан алат за кориснике који раде са графичком апликацијом или било којом апликацијом која подржава персонализацију.

Реацт-цолор библиотека нуди широк спектар опција и много стилова бирача боја који одговарају вашим потребама.

Додавање бирача боја вашој апликацији

Реацт-цолор библиотека олакшава додавање бирача боја вашој Реацт апликацији. Ова библиотека пружа једноставан и интуитиван начин за кориснике да бирају боје за своје апликације. Код је једноставан за коришћење и пружа одлично корисничко искуство. Пре него што додате бирач боја, прво морате направите једноставну апликацију за реаговање.

Преглед реацт-цолор

Реацт-цолор библиотека је одличан начин да додате бирач боја у вашу Реацт апликацију. Нуди интерфејс једноставан за коришћење који омогућава корисницима да бирају из низа боја. Библиотека такође пружа реквизите које можете користити за прилагођавање бирача боја.

instagram viewer

Код за додавање бирача боја у вашу Реацт апликацију је једноставан. Да бисте користили реацт-цолор библиотеку, прво морате да инсталирате библиотеку користећи нпм, менаџер пакета за Ноде.јс.

нпм и реагују-боја

Затим једноставно додајте следећи код компоненти за коју желите да прикажете бирач боја:

увоз Реаговати из'реаговати'
увоз { СкетцхПицкер} из'реацт-цолор'
класаСаставни деопротежеРеаговати.Саставни део{
 дати, пружити() {
повратак<СкетцхПицкер />
 }
}
извозУобичајено Саставни део

Горњи код ће приказати основни бирач боја. То ће омогућити корисницима да бирају из низа боја. Бирач ће такође приказати ХЕКС код изабране боје, који можете да користите у другим деловима апликације.

Доступни реквизити

Библиотека боја реаговања пружа реквизите за прилагођавање бирача боја. Можете користити ове реквизите да промените величину бирача, доступне боје и још много тога.

Испод су доступни реквизити за бирач боја:

  • ширина: Ширина бирача боје у пикселима.
  • висина: Висина бирача боје у пикселима.
  • боја: Почетна боја бирача.
  • онЦханге: Функција повратног позива која се покреће када се боја промени.
  • онЦхангеЦомплете: Функција повратног позива која се покреће када се промена боје заврши.

Следећи код показује како да користите све доступне реквизите за бирач боја:

увоз Реаговати из'реаговати'
увоз { СкетцхПицкер} из'реацт-цолор'

класаСаставни деопротежеРеаговати.Саставни део{

 дати, пружити() {
повратак (
 ширина={200}
 висина={200}
 цолор="#фф0000"
 онЦханге={(боја) => конзола.лог (боја)}
 онЦхангеЦомплете={(боја, догађај)=> конзола.лог (боја)}
 />
 )
 }
}
извозУобичајено Саставни део

Горњи код ће приказати бирач боја са ширином од 200пк, висином од 200пк, почетном бојом #фф0000 и палетом боја. Такође ће приказати поље за унос кода боје и приказаће алфа канал. Када се боја промени, позваће онЦханге повратни позив и пријавити нову боју у конзолу.

Додавање додатних бирача боја

Библиотека боја реаговања пружа низ различитих бирача боја које можете изабрати, а поред СкетцхПицкер-а који се користи у последњем одељку, можете користити и ЦхромеПицкер.

Увезите ЦхромеПицкер на исти начин на који сте увезли СкетцхПицкер:

увоз { ЦхромеПицкер } из'реацт-цолор';

Када увезете ЦхромеПицкер, можете да га користите у својој апликацији додавањем следећег кода:

 боја={ ово.стате.бацкгроунд }
 онЦхангеЦомплете={ ово.хандлеЦхангеЦомплете }
 дисаблеАлпха={истина}
/>

ЦхромеПицкер узима исте реквизите као СкетцхПицкер, али такође има неколико додатних опција, као што је могућност да онемогућите алфа канал, што можете да урадите са дисаблеАлпха пропом. Такође можете поставити боју директно помоћу реквизита за боју.

Постоје и други бирачи боја доступни у библиотеци боја реаговања, као што су Блоцк, Твиттер и ГитХуб. Сваки од ових берача има своје реквизите, па обавезно погледајте документацију за више информација.

Побољшајте своје корисничко искуство помоћу бирача боја

Додавање бирача боја вашој Реацт апликацији је одличан начин да побољшате корисничко искуство. Омогућава корисницима да брзо и лако одаберу боје за своје апликације. Такође можете учинити бирач боја лакшим за коришћење користећи Таилвинд ЦСС.