Pop-ups zijn een geweldige manier om de aandacht van uw gebruiker te trekken en belangrijke informatie weer te geven. U kunt ze gebruiken voor zaken als bevestigingsberichten en foutmeldingen. Of u kunt ze gewoon gebruiken om extra informatie over een element op een pagina weer te geven.

In React zijn er twee manieren om pop-ups te maken: met React-hooks of met een externe module.

Pop-ups maken in React.js

Eerst, maak een eenvoudige reactie-app. Daarna kunt u op twee manieren een pop-up toevoegen. U kunt gebruik maken van React hooks of een externe module.

1. React-hooks gebruiken

De hooks-benadering is eenvoudiger en vereist slechts een paar regels code.

Eerst moet u een functie maken die de pop-up opent. U kunt deze functie definiëren in de component die de pop-up zal weergeven.

Vervolgens moet u de useState-hook gebruiken om een ​​statusvariabele voor de pop-up te maken. U kunt deze statusvariabele gebruiken om te bepalen of de pop-up open moet zijn of niet.

Ten slotte moet u een knop aan uw component toevoegen die de pop-up activeert. Wanneer u op deze knop klikt, stelt u de statusvariabele in op true, waardoor de pop-up verschijnt.

instagram viewer

Bekijk de code voor deze aanpak:

importeren Reageer, { useState } van 'Reageer';
functieVoorbeeld() {
const [isOpen, setIsOpen] = useState(vals);


opbrengst (
<div>
<knop onClick={() => setIsOpen (waar)}>
 Pop-up openen
</button>


{is geopend && (
<div>
<div>
 Dit is de inhoud van de pop-up.
</div>
<knop onClick={() => setIsOpen (false)}>
 Pop-up sluiten
</button>
</div>
 )}
</div>
 );
}
exporterenstandaard Voorbeeld;

Eerst importeert deze code de useState-hook uit de core react-bibliotheek. Vervolgens gebruikt de functie Example de hook useState om een ​​state-variabele met de naam isOpen te maken. Deze statusvariabele bepaalt of de pop-up open moet zijn of niet.

Voeg vervolgens een knop toe aan de component die de pop-up activeert. Wanneer u op deze knop klikt, wordt de statusvariabele ingesteld op waar, waardoor de pop-up verschijnt.

Voeg ten slotte een knop toe aan de component waarmee de pop-up wordt gesloten. Wanneer u op deze knop klikt, wordt de statusvariabele ingesteld op false, waardoor de pop-up verdwijnt.

2. Een externe module gebruiken

Je kunt ook pop-ups maken in React met behulp van een externe module. Er zijn veel modules beschikbaar die u hiervoor kunt gebruiken.

Een populaire module is reactiemodaal. react-modal is een eenvoudige en lichtgewicht module waarmee u modale dialogen kunt maken in React.

Om react-modal te gebruiken, moet je het eerst installeren met behulp van npm:

npm installeren reactie-modaal

Zodra je react-modal hebt geïnstalleerd, kun je het importeren in je React-component:

importeren ReactModal van 'react-modaal';
importeren Reageer, { useState } van 'Reageer';
functieVoorbeeld() {
const [isOpen, setIsOpen] = useState(vals);


opbrengst (
<div>
<knop onClick={setIsOpen}>Modaal openen</button>
<ReactModal
 isOpen={isOpen}
 inhoudLabel="Voorbeeld Modaal"
>
 Dit is de inhoud van het modaal.
</ReactModal>
</div>
 );
}
exporterenstandaard Voorbeeld;

In deze code gebruik je nog steeds de React-hooks, maar dan met de react-modale module. Met de react-modal module kun je meer functionaliteit toevoegen aan de pop-up. Zoals u kunt zien, lijkt de code erg op de vorige aanpak. Het enige verschil is dat u nu de ReactModal-component van react-modal gebruikt in plaats van uw eigen component te maken.

Eerst moet u de reactie-modale module importeren. Vervolgens gebruikt u de ReactModal-component om de inhoud van uw pop-up in te pakken. Gebruik de isOpen-prop om te bepalen of de modal open moet zijn of niet.

Nadat u uw pop-up hebt gemaakt, wilt u er misschien extra functies aan toevoegen. U wilt bijvoorbeeld de pop-up sluiten wanneer de gebruiker erbuiten klikt.

Om dit te doen, moet u de onRequestClose prop van de react-modal component gebruiken. Deze prop heeft een functie als waarde. Deze functie wordt uitgevoerd wanneer de gebruiker buiten de modal klikt.

Om bijvoorbeeld de pop-up te sluiten wanneer de gebruiker erbuiten klikt, gebruikt u de volgende code:

importeren Reageer, { useState } van 'Reageer';
importeren ReactModal van 'react-modaal';
functieVoorbeeld() {
const [isOpen, setIsOpen] = useState(vals);


opbrengst (
<div>
<knop onClick={() => setIsOpen (waar)}>
 Modaal openen
</button>
<ReactModal
 isOpen={isOpen}
 inhoudLabel="Voorbeeld Modaal"
 onRequestClose={() => setIsOpen(vals)}
>
 Dit is de inhoud van het modaal.
</ReactModal>
</div>
 );
}
exporterenstandaard Voorbeeld;

De functie die we doorgeven aan de onRequestClose-prop stelt eenvoudigweg de isOpen-statusvariabele in op false. Hierdoor wordt de modal gesloten.

U kunt ook andere rekwisieten toevoegen aan de ReactModal-component om deze verder aan te passen. Voor een volledige lijst met rekwisieten kun je de react-modal-documentatie bekijken.

Styling toevoegen in pop-ups

Nadat je je pop-up hebt gemaakt, wil je er misschien wat styling aan toevoegen. Er zijn veel manieren om React-componenten te stylen, maar we zullen ons concentreren op inline stijlen.

Inline-stijlen zijn stijlen die u rechtstreeks aan een React-component kunt toevoegen. Om inline stijlen toe te voegen, moet u de eigenschap style gebruiken. Deze eigenschap neemt een object als waarde, waarbij de sleutels de stijleigenschappen zijn en de waarden de stijlwaarden.

Als u bijvoorbeeld een achtergrondkleur wit en een breedte van 500 px aan een pop-up wilt toevoegen, gebruikt u de volgende code:

importeren Reageer van 'Reageer';
functieVoorbeeld() {
opbrengst (
<div-stijl={{ backgroundColor: 'wit', breedte: '500px' }}>
 Dit is de inhoud van de pop-up.
</div>
 );
}
exporterenstandaard Voorbeeld;

In deze code voeg je de eigenschap style toe aan het div-element met de eigenschappen backgroundColor en width. Je kan ook gebruik Tailwind CSS in de react-app om uw pop-ups te stylen.

Verhoog de conversieratio met pop-ups

Pop-ups kunnen de conversiepercentages helpen verhogen door belangrijke informatie aan de gebruiker weer te geven. U kunt bijvoorbeeld een pop-up gebruiken om een ​​kortingscode of een speciale aanbieding weer te geven. U kunt ook een pop-up gebruiken om e-mailadressen te verzamelen voor uw nieuwsbrief. Het toevoegen van een pop-up aan uw React-app is een geweldige manier om de conversieratio's te verhogen.

U kunt uw React-applicatie ook eenvoudig gratis implementeren op GitHub-pagina's.