Pridajte do svojej aplikácie React.js pop-up efekty

Kontextové okná sú skvelým spôsobom, ako upútať pozornosť používateľa a zobraziť dôležité informácie. Môžete ich použiť na veci, ako sú potvrdzovacie správy a chybové správy. Alebo ich môžete použiť len na zobrazenie dodatočných informácií o prvku na stránke.

V Reacte existujú dva spôsoby, ako vytvoriť kontextové okná: pomocou háčikov React alebo pomocou externého modulu.

VYUŽITIE VIDEA DŇA

Ako vytvoriť kontextové okná v React.js

Najprv, vytvorte jednoduchú aplikáciu na reakcie . Potom môžete pridať kontextové okno pomocou jednej z dvoch metód. Môžete použiť háky React alebo externý modul.

1. Použitie React Hooks

Prístup hákov je jednoduchší a vyžaduje len niekoľko riadkov kódu.

Najprv musíte vytvoriť funkciu, ktorá otvorí kontextové okno. Túto funkciu môžete definovať v komponente, ktorý zobrazí kontextové okno.

Ďalej musíte použiť háčik useState na vytvorenie premennej stavu pre kontextové okno. Túto stavovú premennú môžete použiť na určenie, či má byť kontextové okno otvorené alebo nie.

Nakoniec musíte do svojho komponentu pridať tlačidlo, ktoré spustí vyskakovacie okno. Keď kliknete na toto tlačidlo, nastavte stavovú premennú na hodnotu true, čo spôsobí zobrazenie kontextového okna.

presunúť program na inú jednotku

Pozrite sa na kód pre tento prístup:

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;

Najprv tento kód importuje háčik useState z hlavnej knižnice reakcií. Potom funkcia Príklad použije háčik useState na vytvorenie stavovej premennej s názvom isOpen. Táto premenná stavu určuje, či má byť kontextové okno otvorené alebo nie.

Potom do komponentu pridajte tlačidlo, ktoré spustí kontextové okno. Keď kliknete na toto tlačidlo, stavová premenná sa nastaví na hodnotu true, čo spôsobí zobrazenie kontextového okna.

Nakoniec pridajte do komponentu tlačidlo, ktoré zatvorí vyskakovacie okno. Keď kliknete na toto tlačidlo, stavová premenná bude nastavená na false, čo spôsobí, že vyskakovacie okno zmizne.

reagovať na stránku jedným tlačidlom a otvoreným kontextovým oknom

2. Pomocou externého modulu

Môžete tiež vytvárať kontextové okná v React pomocou externého modulu. K dispozícii je veľa modulov, ktoré môžete na tento účel použiť.

Jedným z populárnych modulov je reakčný modálny. React-modal je jednoduchý a ľahký modul, ktorý vám umožňuje vytvárať modálne dialógy v Reacte.

Ak chcete použiť response-modal, musíte ho najprv nainštalovať pomocou npm:

npm install react-modal

Po nainštalovaní React-modal ho môžete importovať do svojho komponentu 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;

V tomto kóde stále používate háky React, ale s modulom React-modal. Pomocou modulu Reagovať môžete do kontextového okna pridať ďalšie funkcie. Ako vidíte, kód je veľmi podobný predchádzajúcemu prístupu. Jediný rozdiel je v tom, že teraz používate komponent ReactModal z React-modal namiesto vytvárania vlastného.

Najprv musíte importovať modul reakcie. Potom použijete komponent ReactModal na zabalenie obsahu vyskakovacieho okna. Použite podperu isOpen na určenie, či má byť modal otvorený alebo nie.

Po vytvorení kontextového okna môžete doň pridať ďalšie funkcie. Môžete napríklad chcieť zatvoriť kontextové okno, keď používateľ klikne mimo neho.

Aby ste to dosiahli, musíte použiť prop onRequest komponentu Reagovať. Táto podpera berie funkciu ako svoju hodnotu. Táto funkcia sa spustí, keď používateľ klikne mimo modálu.

Ak chcete napríklad zatvoriť kontextové okno, keď používateľ klikne mimo neho, použite nasledujúci kód:

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;

Funkcia, ktorú odovzdávame prop onRequest, jednoducho nastaví stavovú premennú isOpen na hodnotu false. To spôsobí zatvorenie modálu.

Ku komponentu ReactModal môžete pridať aj ďalšie rekvizity, aby ste si ho mohli ďalej prispôsobiť. Úplný zoznam rekvizít si môžete pozrieť v dokumentácii k reakcii.

Pridanie štýlu do kontextových okien

Po vytvorení vyskakovacieho okna doň možno budete chcieť pridať nejaký štýl. Existuje mnoho spôsobov, ako upraviť komponenty Reactu, ale my sa zameriame na inline štýly.

Vložené štýly sú štýly, ktoré môžete pridať priamo do komponentu React. Ak chcete pridať vložené štýly, musíte použiť vlastnosť štýlu. Táto vlastnosť berie objekt ako svoju hodnotu, kde kľúče sú vlastnosti štýlu a hodnoty sú hodnoty štýlu.

Napríklad, ak chcete do kontextového okna pridať bielu farbu pozadia a šírku 500 pixelov, použite nasledujúci kód:

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;

V tomto kóde pridáte vlastnosť style do prvku div s vlastnosťami backgroundColor a width. Môžete tiež použite Tailwind CSS v aplikácii Reagovať na úpravu vyskakovacích okien.

Zvýšte mieru konverzie pomocou kontextových okien

Vyskakovacie okná môžu pomôcť zvýšiť mieru konverzie zobrazením dôležitých informácií pre používateľa. Môžete napríklad použiť vyskakovacie okno na zobrazenie zľavového kódu alebo špeciálnej ponuky. Môžete tiež použiť kontextové okno na zhromažďovanie e-mailových adries pre váš bulletin. Pridanie kontextového okna do vašej aplikácie React je skvelý spôsob, ako zvýšiť mieru konverzie.

Svoju aplikáciu React môžete tiež jednoducho bezplatne nasadiť na stránky GitHub.