Додајте искачуће ефекте у своју Реацт.јс апликацију

Искачући прозори су одличан начин да привучете пажњу корисника и прикажете важне информације. Можете их користити за ствари као што су поруке потврде и поруке о грешци. Или их једноставно можете користити да прикажете додатне информације о елементу на страници.

У Реацт-у постоје два начина за креирање искачућих прозора: коришћењем Реацт кукица или коришћењем екстерног модула.

МАКЕУСЕОФ ВИДЕО ДАНА

Како направити искачуће прозоре у Реацт.јс

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

1. Коришћење Реацт Хоокс

Приступ кукицама је једноставнији и захтева само неколико редова кода.

Прво, потребно је да креирате функцију која ће отворити искачући прозор. Ову функцију можете дефинисати у компоненти која ће приказати искачући прозор.

Затим морате да користите куку усеСтате да креирате променљиву стања за искачући прозор. Можете користити ову променљиву стања да одредите да ли искачући прозор треба да буде отворен или не.

моја трака задатака неће радити на Виндовс 10

Коначно, морате да додате дугме својој компоненти које ће покренути искачући прозор. Када кликнете на ово дугме, поставите променљиву стања на тачно, што ће изазвати појављивање искачућег прозора.

Погледајте код за овај приступ:

30384888ЦАДЦФЦ6570274ДА9559ЦЕЦА3А006Ф0БД

Прво, овај код увози усеСтате куку из основне библиотеке реаговања. Затим, функција Пример користи закачицу усеСтате да креира променљиву стања која се зове исОпен. Ова променљива стања одређује да ли искачући прозор треба да буде отворен или не.

Затим додајте дугме компоненти које ће покренути искачући прозор. Када кликнете на ово дугме, променљива стања ће бити постављена на тачно, што ће изазвати појављивање искачућег прозора.

како бесплатно преузети музику

На крају, додајте дугме компоненти које ће затворити искачући прозор. Када кликнете на ово дугме, променљива стања ће бити постављена на нетачно, што ће довести до нестанка искачућег прозора.

реаговати страница са једним дугметом и отвореним искачућим прозором

2. Коришћење екстерног модула

Такође можете да креирате искачуће прозоре у Реацт-у користећи спољни модул. Постоји много доступних модула које можете користити за ову сврху.

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

Да бисте користили реацт-модал, прво морате да га инсталирате користећи нпм:

Е15Ф46БФА7524Ф86А8АФ1088657АЕ9Ц3А8Е4ФБ68

Када инсталирате реацт-модал, можете га увести у своју Реацт компоненту:

72Д47ДБЕ489Ц07А3Ц5Ц6Б69692Ц964ДФ94Е356А1

У овом коду и даље користите Реацт куке, али са реацт-модал модулом. Помоћу реацт-модал модула можете додати више функционалности искачућем прозору. Као што видите, код је веома сличан претходном приступу. Једина разлика је у томе што сада користите компоненту РеацтМодал из реацт-модал уместо да креирате сопствену.

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

реаговати страница са искачућим прозором

Када направите искачући прозор, можда ћете желети да му додате додатне функције. На пример, можда ћете желети да затворите искачући прозор када корисник кликне ван њега.

Да бисте то урадили, морате да користите онРекуест проп реацт-модал компоненте. Овај реквизит узима функцију као своју вредност. Ова функција ће се покренути када корисник кликне ван модалног.

На пример, да бисте затворили искачући прозор када корисник кликне ван њега, користили бисте следећи код:

34Д61435ДБ54А09ФФ6Ф8963БАФБ8АФ54Ц7ДД0Ф4Е

Функција коју прослеђујемо онРекуест пропу једноставно поставља променљиву стања исОпен на фалсе. Ово ће довести до затварања модала.

како додати више слика у инстаграм причу

Такође можете додати друге реквизите компоненти РеацтМодал да бисте је додатно прилагодили. За комплетну листу реквизита, можете погледати реацт-модал документацију.

Додавање стила у искачуће прозоре

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

Инлине стилови су стилови које можете додати директно у Реацт компоненту. Да бисте додали уграђене стилове, потребно је да користите својство стила. Ово својство узима објекат као своју вредност, где су кључеви својства стила, а вредности вредности стила.

На пример, да бисте искачућем прозору додали боју позадине беле и ширину од 500 пиксела, користите следећи код:

22ЦЕДФБ3822442781А3АБ9205Б69Ц2734ББД7А58

У овом коду додајете својство стиле елементу див са својствима бацкгроундЦолор и видтх. Можете такође користите Таилвинд ЦСС у апликацији за реаговање да стилизујете искачуће прозоре.

Повећајте стопу конверзије помоћу искачућих прозора

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

Такође можете лако да бесплатно примените своју Реацт апликацију на ГитХуб страницама.