Jak vytvořit vlastní upozornění v React pomocí React-Toastify

Výstražné zprávy se ve webových aplikacích často používají k zobrazení varování, chyb, zpráv o úspěchu a dalších cenných informací.

Existuje několik populárních balíčků a rámců pro vytváření výstražných zpráv v Reactu. React-Toastify je knihovna React, která vám umožňuje přidávat upozornění a výstražné zprávy do vašich aplikací.

Instalace React Toastify

Chcete-li nainstalovat Toastify do svého projektu React, spusťte tento příkaz v adresáři projektu:

npm install --save reagovat-toastify

Nastavení funkce Toastify

Chcete-li použít balíček Toastify, budete muset importovat Nádoba na toasty, přípitek metodu a doprovodný soubor CSS poskytovaný balíčkem.

The Nádoba na toasty uvnitř komponenty App jsou uložena všechna vytvořená toastová oznámení.

import { Nádoba na toasty, toasty } z"reagovat-toastify";
import'react-toastify/dist/ReactToastify.css';
funkceAplikace() {
vrátit se(



 </div>
 );
}

Můžete použít přípitek způsoby, jak vytvořit toastová oznámení pro váš projekt React:

funkceAplikace() {
konst oznámit = () => přípitek.úspěch("Ahoj!");
vrátit se(


Upozornit</button>

 </div>
 );
}

Kliknutím na tlačítko, které tento kód vygeneruje, zavoláte přípitek.úspěch metodou, předáním "Ahoj!" tětiva. Tím se vytvoří oznámení o přípitku, které zobrazí zprávu na obrazovce, jako je toto:

Všimněte si, že existují různé typy toastových metod, které můžete volat, jako např toast.info(), toast.error(), toast.success(), toast.warning(). Každá z těchto metod má nějaký jemný barevný styl, který odráží typ zprávy.

Umístění upozornění na toasty

Ve výchozím nastavení se upozornění na toasty zobrazují v pravé horní části obrazovky webové aplikace. Můžete to změnit nastavením vlastnosti position na Nádoba na toasty. K dispozici je šest hodnot pozice: nahoře vpravo, nahoře uprostřed, nahoře vlevo, dole vpravo, dole uprostřed a vlevo dole.

Například:

funkceAplikace() {
konst oznámit = () => přípitek.úspěch("Ahoj!");
vrátit se(


Upozornit</button>
"vlevo nahoře"/>
 </div>
 );
}

Nastavení polohovací podpěry na Nádoba na toasty vlevo nahoře zajišťuje, že se všechna upozornění na toasty objeví z levé horní části obrazovky.

Výchozí polohu pro jednotlivá upozornění na toasty můžete změnit pomocí podpěry polohy přípitek metody:

funkceAplikace() {
konst oznámit = () => přípitek.úspěch("Ahoj!", {pozice: přípitek. POSITION.TOP_CENTER});
vrátit se(


Upozornit</button>
"vlevo nahoře"/>
 </div>
 );
}

Můžete také umístit oznámení Toast pomocí vlastnosti CSS position, ale poziční podpora Toastify je standardní způsob, jak toho dosáhnout.

Manipulace s autoClose Prop metody Toast a ToastContainer

Dobu zobrazení upozornění na toast můžete změnit. Můžete ovládat, jak dlouho zůstane oznámení o přípitku otevřené pomocí autoClose podpěra. Dobu zpoždění pro všechna upozornění na toasty a jednotlivá upozornění na toasty můžete změnit. The autoClose prop přijímá pouze booleovskou hodnotu false nebo trvání v milisekundách.

Chcete-li změnit dobu zpoždění pro všechna upozornění na toasty, použijte autoClose podpěra uvnitř Nádoba na toasty živel.

Například:

funkceAplikace() {
konst oznámit = () => přípitek.úspěch("Ahoj!");
vrátit se(


Upozornit</button>
5000}/>
 </div>
 );
}

S výše uvedeným nastavením se všechna upozornění na toasty zobrazí přesně na pět sekund (5 000 milisekund).

Za použití autoClose majetek každého přípitek můžete upravit dobu zpoždění pro jednotlivá upozornění na toasty.

Například:

funkceAplikace() {
konst notifyOne = () => toast.info("Zavře se za 10 sekund", {autoClose: 10000});
konst notifyTwo = () => toast.info("Zavře se za 15 sekund", {autoClose: 15000});
vrátit se (


Upozornit One</button>
Upozornit dva</button>

 </div>
 );
}

Chcete-li zabránit tomu, aby se oznámení toastu ve výchozím nastavení zavíralo, můžete nastavit autoClose podpírat Nepravdivé. Můžete zajistit, že uživatel musí ručně zavřít každé upozornění na toast nastavením autoClose podpěra toho Nádoba na toasty na falešné.

Například:

funkceAplikace() {
konst oznámit = () => toast.info("Ahoj!");
vrátit se (


Upozornit</button>
Nepravdivé} />
 </div>
 );
}

Nastavení autoClose podpěra jednotlivce přípitek metody k Nepravdivé také zajistí, že se tato konkrétní upozornění na toasty ve výchozím nastavení nezavřou.

Vykreslování non-string oznámení s Toastify

Při práci s toastovými upozorněními můžete vykreslit řetězce, reagovat komponenty a čísla jako oznamovací zprávy. Chcete-li vykreslit komponentu React jako upozornění na toast, vytvořte komponentu a vykreslete ji pomocí a přípitek metoda.

Například:

funkceZpráva({toastProps, closeToast}) {
vrátit se (


Vítejte {toastProps.position}</p>
</button>
 </div>
 )
}
vývoznívýchozí Zpráva;

Tento blok kódu vytváří komponentu, Zpráva. Při vykreslování komponenty jako oznámení se přidává toast toastProps a zavřítToast rekvizity k vaší komponentě. The zavřítToast prop je funkce, kterou můžete použít k uzavření oznámení. The toastProps prop je objekt s vlastnostmi, které ukládají podrobnosti o oznámení toastu včetně jeho polohy, typu a dalších charakteristik.

Importujte komponentu Message a poté ji předejte funkci toast() a vykreslete ji jako upozornění na toast:

import { Nádoba na toasty, toasty } z"reagovat-toastify";
import'react-toastify/dist/ReactToastify.css';
import Zpráva z"./components/Message";
funkceAplikace() {
konst msg = () => přípitek(<Zpráva />);
vrátit se (


Vítejte</button>

 </div>
 );
}

Kliknutím na tlačítko se na obrazovce zobrazí upozornění obsahující otázku a dvě tlačítka.

Styling Toast oznámení

Pro upozornění na toasty nemusíte používat výchozí styl. Můžete je přizpůsobit tak, aby odpovídaly požadovanému motivu nebo vzoru vhodnému pro vaši webovou aplikaci.

Chcete-li upravit oznámení o toastu, dejte mu a jméno třídy a použít přizpůsobení v souboru CSS.

Například:

funkceAplikace() {
konst oznámit = () => přípitek.úspěch("Ahoj!", {jméno třídy: "přípitek-zpráva"});
vrátit se (


Upozornit</button>
"nahoře uprostřed" />
 </div>
 );
}

s jméno třídy přiložené k vašemu oznámení, můžete upravit styl oznámení toastu podle vašich preferencí v souboru CSS:

.toast-zpráva {
barva pozadí: #000000;
barva: #FFFFFF;
velikost písma: 20px;
vycpávka: 1rem 0.5rem;
}

V důsledku výše uvedeného vlastního stylu bude oznámení vypadat takto:

Toast oznámení pro vaši webovou aplikaci

Nyní můžete v Reactu vytvářet vlastní upozornění pomocí balíčku React-Toastify a jeho dostupných metod. Nastavením stylu těchto vlastních upozornění/oznámení podle vašich preferencí můžete zlepšit uživatelský dojem z vaší webové aplikace.

React-Toastify nabízí rychlou a efektivní metodu, jak bez problémů zahrnout vlastní upozornění do vašeho projektu React.