I popup sono un ottimo modo per attirare l'attenzione dell'utente e visualizzare informazioni importanti. Puoi usarli per cose come messaggi di conferma e messaggi di errore. Oppure puoi semplicemente usarli per mostrare informazioni extra su un elemento in una pagina.

In React, ci sono due modi per creare pop-up: usando gli hook di React o usando un modulo esterno.

Come creare pop-up in React.js

Primo, crea una semplice app di reazione. Successivamente, puoi aggiungere un popup utilizzando uno dei due metodi. Puoi usare gli hook React o un modulo esterno.

1. Usando React Hooks

L'approccio hook è più semplice e richiede solo poche righe di codice.

Innanzitutto, devi creare una funzione che apra il pop-up. È possibile definire questa funzione nel componente che visualizzerà il popup.

Successivamente, è necessario utilizzare l'hook useState per creare una variabile di stato per il popup. È possibile utilizzare questa variabile di stato per determinare se il popup deve essere aperto o meno.

Infine, devi aggiungere un pulsante al tuo componente che attiverà il pop-up. Quando fai clic su questo pulsante, imposta la variabile di stato su true, che farà apparire il pop-up.

instagram viewer

Dai un'occhiata al codice per questo approccio:

importare Reagisci, { useState } da 'reagire';
funzioneEsempio() {
cost [isOpen, setIsOpen] = useState(falso);


ritorno (
<div>
<pulsante al clic={() => setIsOpen (vero)}>
 Apri pop-up
</button>


{è aperto && (
<div>
<div>
 Questo È il contenuto del pop-up.
</div>
<pulsante al clic={() => setIsOpen (falso)}>
 Chiudi pop-up
</button>
</div>
 )}
</div>
 );
}
esportarepredefinito Esempio;

Innanzitutto, questo codice importa l'hook useState dalla libreria core react. Quindi, la funzione Example utilizza l'hook useState per creare una variabile di stato denominata isOpen. Questa variabile di stato determina se il popup deve essere aperto o meno.

Successivamente, aggiungi un pulsante al componente che attiverà il popup. Quando fai clic su questo pulsante, la variabile di stato verrà impostata su true, il che farà apparire il pop-up.

Infine, aggiungi un pulsante al componente che chiuderà il popup. Quando fai clic su questo pulsante, la variabile di stato verrà impostata su false, il che farà scomparire il popup.

2. Utilizzo di un modulo esterno

Puoi anche creare pop-up in React usando un modulo esterno. Ci sono molti moduli disponibili che puoi usare per questo scopo.

Un modulo popolare è react-modal. react-modal è un modulo semplice e leggero che ti consente di creare finestre di dialogo modali in React.

Per usare react-modal, devi prima installarlo usando npm:

npm installare reattivo-modale

Dopo aver installato react-modal, puoi importarlo nel tuo componente React:

importare ReactModal da 'reagire-modale';
importare Reagisci, { useState } da 'reagire';
funzioneEsempio() {
cost [isOpen, setIsOpen] = useState(falso);


ritorno (
<div>
<pulsante onClick={setIsOpen}>Modale aperto</button>
<ReactModal
 èAperto={èAperto}
 contentLabel="Esempio modale"
>
 Questo È il contenuto del modale.
</ReactModal>
</div>
 );
}
esportarepredefinito Esempio;

In questo codice, stai ancora usando gli hook React ma con il modulo react-modal. Con il modulo react-modal, puoi aggiungere più funzionalità al pop-up. Come puoi vedere, il codice è molto simile all'approccio precedente. L'unica differenza è che ora stai usando il componente ReactModal da react-modal invece di crearne uno tuo.

Innanzitutto, devi importare il modulo react-modal. Quindi, usi il componente ReactModal per avvolgere il contenuto del tuo pop-up. Usa la prop isOpen per determinare se il modal deve essere aperto o meno.

Dopo aver creato il tuo pop-up, potresti voler aggiungere ulteriori funzionalità ad esso. Ad esempio, potresti voler chiudere il popup quando l'utente fa clic al di fuori di esso.

Per fare ciò, è necessario utilizzare la prop onRequestClose del componente react-modal. Questo puntello prende una funzione come suo valore. Questa funzione verrà eseguita quando l'utente fa clic al di fuori del modale.

Ad esempio, per chiudere il popup quando l'utente fa clic al di fuori di esso, utilizzare il seguente codice:

importare Reagisci, { useState } da 'reagire';
importare ReactModal da 'reagire-modale';
funzioneEsempio() {
cost [isOpen, setIsOpen] = useState(falso);


ritorno (
<div>
<pulsante al clic={() => setIsOpen (vero)}>
 Modale aperto
</button>
<ReactModal
 èAperto={èAperto}
 contentLabel="Esempio modale"
 onRequestClose={() => setIsOpen(falso)}
>
 Questo È il contenuto del modale.
</ReactModal>
</div>
 );
}
esportarepredefinito Esempio;

La funzione che stiamo passando alla prop onRequestClose imposta semplicemente la variabile di stato isOpen su false. Ciò causerà la chiusura del modale.

Puoi anche aggiungere altri oggetti di scena al componente ReactModal per personalizzarlo ulteriormente. Per un elenco completo degli oggetti di scena, puoi consultare la documentazione di react-modal.

Aggiunta di stili nei pop-up

Dopo aver creato il tuo pop-up, potresti voler aggiungere uno stile ad esso. Esistono molti modi per modellare i componenti React, ma ci concentreremo sugli stili inline.

Gli stili in linea sono stili che puoi aggiungere direttamente a un componente React. Per aggiungere stili incorporati, devi utilizzare la proprietà style. Questa proprietà accetta un oggetto come valore, dove le chiavi sono le proprietà dello stile ei valori sono i valori dello stile.

Ad esempio, per aggiungere un colore di sfondo bianco e una larghezza di 500 px a un popup, devi utilizzare il seguente codice:

importare Reagire da 'reagire';
funzioneEsempio() {
ritorno (
<stile div={{ colore di sfondo: 'bianco', larghezza: '500 pixel' }}>
 Questo È il contenuto del pop-up.
</div>
 );
}
esportarepredefinito Esempio;

In questo codice, aggiungi la proprietà style all'elemento div con le proprietà backgroundColor e width. Puoi anche usa Tailwind CSS nell'app React per modellare i tuoi popup.

Aumenta il tasso di conversione con i pop-up

I popup possono aiutare ad aumentare i tassi di conversione mostrando informazioni importanti all'utente. Ad esempio, puoi utilizzare un popup per visualizzare un codice sconto o un'offerta speciale. Puoi anche utilizzare un pop-up per raccogliere gli indirizzi email per la tua newsletter. L'aggiunta di un pop-up alla tua app React è un ottimo modo per aumentare i tassi di conversione.

Puoi anche distribuire facilmente la tua applicazione React gratuitamente sulle pagine GitHub.