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

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

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

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

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

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

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

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

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

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

увоз Реагујте, { усеСтате } из 'реаговати';
функцијаПример() {
конст [исОпен, сетИсОпен] = усеСтате(лажно);


повратак (
<див>
<дугме онЦлицк={() => сетИсОпен (труе)}>
 Отворите искачући прозор
</button>


{је отворен && (
<див>
<див>
 Ово је садржај искачућег прозора.
</div>
<дугме онЦлицк={() => сетИсОпен (фалсе)}>
 Затвори искачући прозор
</button>
</div>
 )}
</div>
 );
}
извозУобичајено Пример;

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

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

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

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

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

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

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

нпм инсталирај реаговати-модал

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

увоз РеацтМодал из 'реацт-модал';
увоз Реагујте, { усеСтате } из 'реаговати';
функцијаПример() {
конст [исОпен, сетИсОпен] = усеСтате(лажно);


повратак (
<див>
<дугме онЦлицк={сетИсОпен}>Отворите Модал</button>
<РеацтМодал
 исОпен={исОпен}
 цонтентЛабел="Пример Модал"
>
 Ово је садржај модалног.
</ReactModal>
</div>
 );
}
извозУобичајено Пример;

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

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

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

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

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

увоз Реагујте, { усеСтате } из 'реаговати';
увоз РеацтМодал из 'реацт-модал';
функцијаПример() {
конст [исОпен, сетИсОпен] = усеСтате(лажно);


повратак (
<див>
<дугме онЦлицк={() => сетИсОпен (труе)}>
 Отворите Модал
</button>
<РеацтМодал
 исОпен={исОпен}
 цонтентЛабел="Пример Модал"
 онРекуестЦлосе={() => сетИсОпен(лажно)}
>
 Ово је садржај модалног.
</ReactModal>
</div>
 );
}
извозУобичајено Пример;

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

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

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

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

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

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

увоз Реаговати из 'реаговати';
функцијаПример() {
повратак (
<див стиле={{ бацкгроундЦолор: 'бео', ширина: '500пк' }}>
 Ово је садржај искачућег прозора.
</div>
 );
}
извозУобичајено Пример;

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

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

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

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