Vyskakovací okna jsou skvělým způsobem, jak upoutat pozornost uživatele a zobrazit důležité informace. Můžete je použít pro věci, jako jsou potvrzovací zprávy a chybové zprávy. Nebo je můžete použít k zobrazení dalších informací o prvku na stránce.

V Reactu existují dva způsoby, jak vytvořit vyskakovací okna: pomocí háčků React nebo pomocí externího modulu.

Jak vytvářet vyskakovací okna v React.js

První, vytvořit jednoduchou aplikaci pro reakce. Poté můžete přidat vyskakovací okno pomocí jedné ze dvou metod. Můžete použít háky React nebo externí modul.

1. Použití React Hooks

Přístup háčků je jednodušší a vyžaduje pouze několik řádků kódu.

Nejprve musíte vytvořit funkci, která otevře vyskakovací okno. Tuto funkci můžete definovat v komponentě, která zobrazí vyskakovací okno.

Dále musíte použít háček useState k vytvoření stavové proměnné pro vyskakovací okno. Tuto stavovou proměnnou můžete použít k určení, zda má být vyskakovací okno otevřené nebo ne.

Nakonec musíte do komponenty přidat tlačítko, které spustí vyskakovací okno. Když klepnete na toto tlačítko, nastavte stavovou proměnnou na hodnotu true, což způsobí zobrazení vyskakovacího okna.

instagram viewer

Podívejte se na kód pro tento přístup:

import Reagovat, { useState } z 'reagovat';
funkcePříklad() {
konst [isOpen, setIsOpen] = useState(Nepravdivé);


vrátit se (
<div>
<button onClick={() => setIsOpen (true)}>
 Otevřete vyskakovací okno
</button>


{je otevřeno && (
<div>
<div>
 Tento je obsah vyskakovacího okna.
</div>
<button onClick={() => setIsOpen (false)}>
 Zavřít vyskakovací okno
</button>
</div>
 )}
</div>
 );
}
vývoznívýchozí Příklad;

Nejprve tento kód importuje háček useState z hlavní knihovny reakcí. Potom funkce Example použije háček useState k vytvoření stavové proměnné s názvem isOpen. Tato stavová proměnná určuje, zda má být vyskakovací okno otevřené nebo ne.

Dále přidejte do komponenty tlačítko, které spustí vyskakovací okno. Když kliknete na toto tlačítko, stavová proměnná bude nastavena na hodnotu true, což způsobí zobrazení vyskakovacího okna.

Nakonec do komponenty přidejte tlačítko, které zavře vyskakovací okno. Když kliknete na toto tlačítko, stavová proměnná bude nastavena na false, což způsobí, že vyskakovací okno zmizí.

2. Použití externího modulu

V Reactu můžete také vytvářet vyskakovací okna pomocí externího modulu. K dispozici je mnoho modulů, které můžete k tomuto účelu použít.

Jeden populární modul je reagovat-modální. React-modal je jednoduchý a lehký modul, který vám umožňuje vytvářet modální dialogy v Reactu.

Chcete-li použít response-modal, musíte jej nejprve nainstalovat pomocí npm:

npm Nainstalujte reagovat-modální

Jakmile nainstalujete React-modal, můžete jej importovat do komponenty React:

import ReactModal z 'react-modal';
import Reagovat, { useState } z 'reagovat';
funkcePříklad() {
konst [isOpen, setIsOpen] = useState(Nepravdivé);


vrátit se (
<div>
<button onClick={setIsOpen}>Otevřete Modal</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Příklad Modal"
>
 Tento je obsah modalu.
</ReactModal>
</div>
 );
}
vývoznívýchozí Příklad;

V tomto kódu stále používáte háky React, ale s modulem React-modal. Pomocí modulu reagovat-modal můžete do vyskakovacího okna přidat další funkce. Jak vidíte, kód je velmi podobný předchozímu přístupu. Jediný rozdíl je v tom, že nyní používáte komponentu ReactModal z React-modal namísto vytváření své vlastní.

Nejprve musíte importovat modul reagovat. Potom použijete komponentu ReactModal k zabalení obsahu vyskakovacího okna. Pomocí prop isOpen určete, zda má být modal otevřený nebo ne.

Jakmile vytvoříte vyskakovací okno, možná do něj budete chtít přidat další funkce. Můžete například chtít zavřít vyskakovací okno, když uživatel klikne mimo něj.

Chcete-li to provést, musíte použít prop onRequestClose komponenty reagovat-modal. Tato podpěra bere funkci jako svou hodnotu. Tato funkce se spustí, když uživatel klikne mimo modal.

Chcete-li například zavřít vyskakovací okno, když uživatel klikne mimo něj, použijte následující kód:

import Reagovat, { useState } z 'reagovat';
import ReactModal z 'react-modal';
funkcePříklad() {
konst [isOpen, setIsOpen] = useState(Nepravdivé);


vrátit se (
<div>
<button onClick={() => setIsOpen (true)}>
 Otevřete Modal
</button>
<ReactModal
 isOpen={isOpen}
 contentLabel="Příklad Modal"
 onRequestClose={() => setIsOpen(Nepravdivé)}
>
 Tento je obsah modalu.
</ReactModal>
</div>
 );
}
vývoznívýchozí Příklad;

Funkce, kterou předáváme prop onRequestClose, jednoduše nastaví stavovou proměnnou isOpen na false. To způsobí uzavření modu.

Ke komponentě ReactModal můžete také přidat další rekvizity, abyste ji dále přizpůsobili. Úplný seznam rekvizit najdete v dokumentaci k reakci.

Přidání stylů do vyskakovacích oken

Jakmile vytvoříte vyskakovací okno, možná do něj budete chtít přidat nějaký styl. Existuje mnoho způsobů, jak stylovat komponenty React, ale my se zaměříme na inline styly.

Vložené styly jsou styly, které můžete přidat přímo do komponenty React. Chcete-li přidat vložené styly, musíte použít vlastnost style. Tato vlastnost bere jako hodnotu objekt, kde klíče jsou vlastnosti stylu a hodnoty jsou hodnoty stylu.

Chcete-li například do vyskakovacího okna přidat bílou barvu pozadí a šířku 500 pixelů, použijte následující kód:

import Reagovat z 'reagovat';
funkcePříklad() {
vrátit se (
<div style={{ backgroundColor: 'bílý', šířka: '500 pixelů' }}>
 Tento je obsah vyskakovacího okna.
</div>
 );
}
vývoznívýchozí Příklad;

V tomto kódu přidáte vlastnost style do prvku div s vlastnostmi backgroundColor a width. Můžete také použijte Tailwind CSS v aplikaci Reagovat styl vašich vyskakovacích oken.

Zvyšte míru konverze pomocí vyskakovacích oken

Vyskakovací okna mohou pomoci zvýšit míru konverze tím, že uživateli zobrazí důležité informace. Pomocí vyskakovacího okna můžete například zobrazit slevový kód nebo speciální nabídku. Můžete také použít vyskakovací okno ke shromažďování e-mailových adres pro váš newsletter. Přidání vyskakovacího okna do vaší aplikace React je skvělý způsob, jak zvýšit míru konverze.

Svou aplikaci React můžete také snadno zdarma nasadit na stránky GitHub.