Skočni prozori izvrstan su način da privučete pažnju korisnika i prikažete važne informacije. Možete ih koristiti za stvari poput potvrdnih poruka i poruka o pogrešci. Ili ih jednostavno možete koristiti za prikaz dodatnih informacija o elementu na stranici.

U Reactu postoje dva načina za stvaranje skočnih prozora: pomoću React kukica ili pomoću vanjskog modula.

Kako stvoriti skočne prozore u React.js

Prvi, izradite jednostavnu aplikaciju za reakciju. Nakon toga možete dodati skočni prozor koristeći jednu od dvije metode. Možete koristiti React kuke ili vanjski modul.

1. Korištenje React kukica

Pristup kukicama je jednostavniji i zahtijeva samo nekoliko redaka koda.

Najprije morate izraditi funkciju koja će otvoriti skočni prozor. Ovu funkciju možete definirati u komponenti koja će prikazati skočni prozor.

Zatim trebate upotrijebiti useState kuku za stvaranje varijable stanja za skočni prozor. Pomoću ove varijable stanja možete odrediti treba li skočni prozor biti otvoren ili ne.

Na kraju, svojoj komponenti trebate dodati gumb koji će pokrenuti skočni prozor. Kada kliknete ovaj gumb, postavite varijablu stanja na true, što će uzrokovati pojavljivanje skočnog prozora.

instagram viewer

Pogledajte kod za ovaj pristup:

uvoz Reagiraj, {useState} iz 'reagirati';
funkcijaPrimjer() {
konst [isOpen, setIsOpen] = useState(lažno);


povratak (
<div>
<gumb onClick={() => setIsOpen (true)}>
 Otvorite skočni prozor
</button>


{otvoreno je && (
<div>
<div>
 Ovaj je sadržaj skočnog prozora.
</div>
<gumb onClick={() => setIOpen (false)}>
 Zatvori skočni prozor
</button>
</div>
 )}
</div>
 );
}
izvozzadano Primjer;

Prvo, ovaj kod uvozi useState kuku iz knjižnice jezgre reakcije. Zatim, funkcija Primjer koristi kuku useState za stvaranje varijable stanja pod nazivom isOpen. Ova varijabla stanja određuje treba li skočni prozor biti otvoren ili ne.

Zatim dodajte gumb komponenti koja će pokrenuti skočni prozor. Kada kliknete ovaj gumb, varijabla stanja bit će postavljena na true, što će uzrokovati pojavljivanje skočnog prozora.

Na kraju dodajte gumb komponenti koja će zatvoriti skočni prozor. Kada kliknete ovaj gumb, varijabla stanja bit će postavljena na false, što će uzrokovati nestanak skočnog prozora.

2. Korištenje vanjskog modula

Također možete stvoriti skočne prozore u Reactu pomoću vanjskog modula. Dostupni su mnogi moduli koje možete koristiti u tu svrhu.

Jedan popularan modul je react-modal. react-modal je jednostavan i lagan modul koji vam omogućuje stvaranje modalnih dijaloga u Reactu.

Da biste koristili react-modal, prvo ga trebate instalirati koristeći npm:

npm instalirati reagirati-modalno

Nakon što instalirate react-modal, možete ga uvesti u svoju React komponentu:

uvoz ReactModal iz 'reagirati-modalno';
uvoz Reagiraj, {useState} iz 'reagirati';
funkcijaPrimjer() {
konst [isOpen, setIsOpen] = useState(lažno);


povratak (
<div>
<gumb onClick={setIsOpen}>Otvorite Modal</button>
<ReactModal
 isOpen={jeOtvoren}
 contentLabel="Primjer modalnog"
>
 Ovaj je sadržaj modala.
</ReactModal>
</div>
 );
}
izvozzadano Primjer;

U ovom kodu još uvijek koristite React kuke, ali s react-modal modulom. S modulom react-modal možete dodati više funkcionalnosti skočnom prozoru. Kao što vidite, kod je vrlo sličan prethodnom pristupu. Jedina razlika je u tome što sada koristite ReactModal komponentu iz react-modal umjesto da stvarate vlastitu.

Prvo, morate uvesti modul react-modal. Zatim koristite ReactModal komponentu za omotavanje sadržaja vašeg skočnog prozora. Koristite isOpen prop kako biste odredili treba li modal biti otvoren ili ne.

Nakon što izradite svoj skočni prozor, možda ćete mu htjeti dodati dodatne značajke. Na primjer, možda želite zatvoriti skočni prozor kada korisnik klikne izvan njega.

Da biste to učinili, morate koristiti onRequestClose prop react-modal komponente. Ovaj prop uzima funkciju kao svoju vrijednost. Ova funkcija će se pokrenuti kada korisnik klikne izvan modalnog.

Na primjer, da biste zatvorili skočni prozor kada korisnik klikne izvan njega, upotrijebili biste sljedeći kôd:

uvoz Reagiraj, {useState} iz 'reagirati';
uvoz ReactModal iz 'reagirati-modalno';
funkcijaPrimjer() {
konst [isOpen, setIsOpen] = useState(lažno);


povratak (
<div>
<gumb onClick={() => setIsOpen (true)}>
 Otvorite Modal
</button>
<ReactModal
 isOpen={jeOtvoren}
 contentLabel="Primjer modalnog"
 onRequestClose={() => setIsOpen(lažno)}
>
 Ovaj je sadržaj modala.
</ReactModal>
</div>
 );
}
izvozzadano Primjer;

Funkcija koju prosljeđujemo onRequestClose prop jednostavno postavlja varijablu stanja isOpen na false. To će uzrokovati zatvaranje modala.

Također možete dodati druge rekvizite komponenti ReactModal da je dodatno prilagodite. Za potpuni popis rekvizita, možete pogledati react-modal dokumentaciju.

Dodavanje stila u skočne prozore

Nakon što izradite svoj skočni prozor, možda ćete mu htjeti dodati neki stil. Postoji mnogo načina za stiliziranje React komponenti, ali mi ćemo se usredotočiti na inline stilove.

Inline stilovi su stilovi koje možete dodati izravno React komponenti. Da biste dodali ugrađene stilove, morate koristiti svojstvo style. Ovo svojstvo uzima objekt kao svoju vrijednost, gdje su ključevi svojstva stila, a vrijednosti su vrijednosti stila.

Na primjer, da biste skočnom prozoru dodali bijelu boju pozadine i širinu od 500 piksela, upotrijebili biste sljedeći kôd:

uvoz Reagirati iz 'reagirati';
funkcijaPrimjer() {
povratak (
<div style={{ backgroundColor: 'bijela', širina: '500 px' }}>
 Ovaj je sadržaj skočnog prozora.
</div>
 );
}
izvozzadano Primjer;

U ovom kodu dodajete svojstvo style elementu div sa svojstvima backgroundColor i width. Također možete koristite Tailwind CSS u aplikaciji React za stiliziranje vaših skočnih prozora.

Povećajte stopu konverzije pomoću skočnih prozora

Skočni prozori mogu pomoći u povećanju stope konverzije prikazivanjem važnih informacija korisniku. Na primjer, možete koristiti skočni prozor za prikaz koda za popust ili posebne ponude. Također možete koristiti skočni prozor za prikupljanje adresa e-pošte za svoj bilten. Dodavanje skočnog prozora u vašu aplikaciju React izvrstan je način za povećanje stope konverzije.

Također možete jednostavno i besplatno implementirati svoju React aplikaciju na GitHub stranicama.