Popup-vinduer er en fin måte å fange brukerens oppmerksomhet og vise viktig informasjon. Du kan bruke dem til ting som bekreftelsesmeldinger og feilmeldinger. Eller du kan bare bruke dem til å vise ekstra informasjon om et element på en side.

I React er det to måter å lage popup-vinduer på: ved hjelp av React-kroker eller ved hjelp av en ekstern modul.

Hvordan lage popup-vinduer i React.js

Først, lag en enkel reaksjonsapp. Etter det kan du legge til en popup ved å bruke en av to metoder. Du kan bruke React-kroker eller en ekstern modul.

1. Bruke React Hooks

Hooks-tilnærmingen er enklere og krever bare noen få linjer med kode.

Først må du lage en funksjon som åpner popup-vinduet. Du kan definere denne funksjonen i komponenten som vil vise popup-vinduet.

Deretter må du bruke useState-kroken for å lage en tilstandsvariabel for popup-vinduet. Du kan bruke denne tilstandsvariabelen til å bestemme om popup-vinduet skal være åpent eller ikke.

Til slutt må du legge til en knapp til komponenten din som vil utløse popup-vinduet. Når du klikker på denne knappen, setter du tilstandsvariabelen til sann, noe som vil føre til at popup-vinduet vises.

instagram viewer

Ta en titt på koden for denne tilnærmingen:

import Reager, { useState } fra 'reagere';
funksjonEksempel() {
konst [isOpen, setIsOpen] = useState(falsk);


komme tilbake (
<div>
<knapp påKlikk={() => setIsOpen (true)}>
 Åpne popup-vindu
</button>


{er åpen && (
<div>
<div>
 Dette er innholdet i popup-vinduet.
</div>
<knapp påKlikk={() => setIsOpen (false)}>
 Lukk popup
</button>
</div>
 )}
</div>
 );
}
eksportmisligholde Eksempel;

Først importerer denne koden useState-kroken fra kjernereagerbiblioteket. Deretter bruker eksempelfunksjonen useState-kroken til å lage en tilstandsvariabel kalt isOpen. Denne tilstandsvariabelen bestemmer om popup-vinduet skal være åpent eller ikke.

Deretter legger du til en knapp til komponenten som vil utløse popup-vinduet. Når du klikker på denne knappen, vil tilstandsvariabelen settes til sann, noe som vil føre til at popup-vinduet vises.

Til slutt legger du til en knapp til komponenten som lukker popup-vinduet. Når du klikker på denne knappen, vil tilstandsvariabelen settes til usann, noe som vil føre til at popup-vinduet forsvinner.

2. Bruke en ekstern modul

Du kan også lage popup-vinduer i React ved hjelp av en ekstern modul. Det er mange moduler tilgjengelig som du kan bruke til dette formålet.

En populær modul er react-modal. react-modal er en enkel og lett modul som lar deg lage modale dialoger i React.

For å bruke react-modal, må du først installere den ved å bruke npm:

npm installere reagere-modal

Når du har installert react-modal, kan du importere den til React-komponenten din:

import ReactModal fra 'reager-modal';
import Reager, { useState } fra 'reagere';
funksjonEksempel() {
konst [isOpen, setIsOpen] = useState(falsk);


komme tilbake (
<div>
<button onClick={setIsOpen}>Åpne Modal</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Eksempel Modal"
>
 Dette er innholdet i modalen.
</ReactModal>
</div>
 );
}
eksportmisligholde Eksempel;

I denne koden bruker du fortsatt React-krokene, men med react-modal-modulen. Med react-modal-modulen kan du legge til mer funksjonalitet til popup-vinduet. Som du kan se, er koden veldig lik den forrige tilnærmingen. Den eneste forskjellen er at du nå bruker ReactModal-komponenten fra react-modal i stedet for å lage din egen.

Først må du importere react-modal-modulen. Deretter bruker du ReactModal-komponenten til å pakke inn innholdet i popup-vinduet. Bruk isOpen-propen for å bestemme om modalen skal være åpen eller ikke.

Når du har opprettet popup-vinduet, kan det være lurt å legge til flere funksjoner til det. Det kan for eksempel være lurt å lukke popup-vinduet når brukeren klikker utenfor det.

For å gjøre dette må du bruke onRequestClose-rekvisitten til react-modal-komponenten. Denne rekvisitten tar en funksjon som sin verdi. Denne funksjonen vil kjøre når brukeren klikker utenfor modalen.

For eksempel, for å lukke popup-vinduet når brukeren klikker utenfor det, bruker du følgende kode:

import Reager, { useState } fra 'reagere';
import ReactModal fra 'reager-modal';
funksjonEksempel() {
konst [isOpen, setIsOpen] = useState(falsk);


komme tilbake (
<div>
<knapp påKlikk={() => setIsOpen (true)}>
 Åpne Modal
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Eksempel Modal"
 onRequestClose={() => setIsOpen(falsk)}
>
 Dette er innholdet i modalen.
</ReactModal>
</div>
 );
}
eksportmisligholde Eksempel;

Funksjonen som vi sender til onRequestClose prop setter ganske enkelt tilstandsvariabelen isOpen til false. Dette vil føre til at modalen lukkes.

Du kan også legge til andre rekvisitter til ReactModal-komponenten for å tilpasse den ytterligere. For en fullstendig liste over rekvisitter kan du sjekke ut dokumentasjonen for react-modal.

Legge til styling i popup-vinduer

Når du har laget popup-vinduet, kan det være lurt å legge til litt styling til den. Det er mange måter å style React-komponenter på, men vi vil fokusere på innebygde stiler.

Innebygde stiler er stiler som du kan legge direkte til en React-komponent. For å legge til innebygde stiler, må du bruke stilegenskapen. Denne egenskapen tar et objekt som sin verdi, der nøklene er stilegenskapene og verdiene er stilverdiene.

For eksempel, for å legge til en bakgrunnsfarge av hvit og en bredde på 500px til et popup-vindu, bruker du følgende kode:

import Reagere fra 'reagere';
funksjonEksempel() {
komme tilbake (
<div style={{ bakgrunnsfarge: 'hvit', bredde: '500 piksler' }}>
 Dette er innholdet i popup-vinduet.
</div>
 );
}
eksportmisligholde Eksempel;

I denne koden legger du stilegenskapen til div-elementet med egenskapene for bakgrunnsfarge og bredde. Du kan også bruk Tailwind CSS i react-appen for å style popup-vinduene dine.

Øk konverteringsfrekvensen med popup-vinduer

Popup-vinduer kan bidra til å øke konverteringsfrekvensen ved å vise viktig informasjon til brukeren. Du kan for eksempel bruke en popup for å vise en rabattkode eller et spesialtilbud. Du kan også bruke en popup for å samle e-postadresser til nyhetsbrevet ditt. Å legge til en popup i React-appen din er en fin måte å øke konverteringsfrekvensen på.

Du kan også enkelt distribuere React-applikasjonen din gratis på GitHub-sider.