Adăugați efecte pop-up în aplicația dvs. React.js

Ferestrele pop-up sunt o modalitate excelentă de a atrage atenția utilizatorului și de a afișa informații importante. Le puteți folosi pentru lucruri precum mesaje de confirmare și mesaje de eroare. Sau le puteți folosi doar pentru a afișa informații suplimentare despre un element dintr-o pagină.

În React, există două moduri de a crea ferestre pop-up: folosind cârlige React sau folosind un modul extern.

află a cui este numărul

REALIZAREA VIDEOCLIPULUI ZILEI

Cum se creează ferestre pop-up în React.js

Primul, creați o aplicație simplă de reacție . După aceea, puteți adăuga o fereastră pop-up folosind oricare dintre cele două metode. Puteți utiliza cârlige React sau un modul extern.

1. Utilizarea cârligelor React

Abordarea hooks este mai simplă și necesită doar câteva linii de cod.

Mai întâi, trebuie să creați o funcție care va deschide fereastra pop-up. Puteți defini această funcție în componenta care va afișa fereastra pop-up.

Apoi, trebuie să utilizați cârligul useState pentru a crea o variabilă de stare pentru fereastra pop-up. Puteți utiliza această variabilă de stare pentru a determina dacă fereastra pop-up ar trebui să fie deschisă sau nu.

În cele din urmă, trebuie să adăugați un buton la componenta dvs. care va declanșa fereastra pop-up. Când faceți clic pe acest buton, setați variabila de stare la true, ceea ce va face ca fereastra pop-up să apară.

Aruncă o privire la codul acestei abordări:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

În primul rând, acest cod importă cârligul useState din biblioteca de bază react. Apoi, funcția Exemplu folosește cârligul useState pentru a crea o variabilă de stare numită isOpen. Această variabilă de stare determină dacă fereastra pop-up ar trebui să fie deschisă sau nu.

Apoi, adăugați un buton la componentă care va declanșa fereastra pop-up. Când faceți clic pe acest buton, variabila de stare va fi setată la true, ceea ce va face ca fereastra pop-up să apară.

În cele din urmă, adăugați un buton la componentă care va închide fereastra pop-up. Când faceți clic pe acest buton, variabila de stare va fi setată la false, ceea ce va face ca fereastra pop-up să dispară.

pagina de reacție cu un singur buton și a deschis pop-up

2. Utilizarea unui modul extern

De asemenea, puteți crea ferestre pop-up în React folosind un modul extern. Există multe module disponibile pe care le puteți utiliza în acest scop.

Un modul popular este react-modal. react-modal este un modul simplu și ușor care vă permite să creați dialoguri modale în React.

Pentru a utiliza react-modal, mai întâi trebuie să îl instalați folosind npm:

npm install react-modal

După ce ați instalat react-modal, îl puteți importa în componenta dvs. React:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

În acest cod, încă utilizați cârligele React, dar cu modulul react-modal. Cu modulul react-modal, puteți adăuga mai multe funcționalități ferestrei pop-up. După cum puteți vedea, codul este foarte asemănător cu abordarea anterioară. Singura diferență este că acum utilizați componenta ReactModal din react-modal în loc să vă creați propria.

În primul rând, trebuie să importați modulul react-modal. Apoi, utilizați componenta ReactModal pentru a încheia conținutul ferestrei pop-up. Utilizați prop isOpen pentru a determina dacă modalul ar trebui să fie deschis sau nu.

După ce ați creat fereastra pop-up, este posibil să doriți să adăugați funcții suplimentare. De exemplu, poate doriți să închideți fereastra pop-up atunci când utilizatorul face clic în afara acesteia.

Pentru a face acest lucru, trebuie să utilizați prop onRequest a componentei react-modal. Acest prop ia o funcție ca valoare. Această funcție va rula atunci când utilizatorul face clic în afara modalului.

De exemplu, pentru a închide fereastra pop-up atunci când utilizatorul face clic în afara acesteia, ați folosi următorul cod:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Funcția pe care o transmitem la prop onRequest setează pur și simplu variabila de stare isOpen la false. Acest lucru va face ca modalul să se închidă.

De asemenea, puteți adăuga alte elemente de recuzită la componenta ReactModal pentru a o personaliza în continuare. Pentru o listă completă de elemente de recuzită, puteți consulta documentația react-modal.

Adăugarea stilului în ferestre pop-up

După ce ați creat fereastra pop-up, este posibil să doriți să îi adăugați un stil. Există multe moduri de a stila componentele React, dar ne vom concentra pe stilurile inline.

Stilurile inline sunt stiluri pe care le puteți adăuga direct la o componentă React. Pentru a adăuga stiluri inline, trebuie să utilizați proprietatea stil. Această proprietate ia un obiect ca valoare, unde cheile sunt proprietățile stilului și valorile sunt valorile stilului.

De exemplu, pentru a adăuga o culoare de fundal de alb și o lățime de 500 px într-o fereastră pop-up, ar trebui să utilizați următorul cod:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

În acest cod, adăugați proprietatea style la elementul div cu proprietățile backgroundColor și width. Poti de asemenea utilizați Tailwind CSS în aplicația react pentru a vă stila ferestrele pop-up.

Creșteți rata de conversie cu ferestre pop-up

Ferestrele pop-up pot ajuta la creșterea ratelor de conversie prin afișarea de informații importante pentru utilizator. De exemplu, puteți folosi o fereastră pop-up pentru a afișa un cod de reducere sau o ofertă specială. De asemenea, puteți utiliza o fereastră pop-up pentru a colecta adrese de e-mail pentru buletinul informativ. Adăugarea unei ferestre pop-up la aplicația dvs. React este o modalitate excelentă de a crește ratele de conversie.

De asemenea, puteți implementa cu ușurință aplicația React gratuit pe paginile GitHub.