Lebilincselő értesítések létrehozása a Toastr segítségével a Reactban

Az értesítések elengedhetetlenek minden webalkalmazáshoz, mivel fontos információkkal látják el a felhasználókat. Ahelyett, hogy a nulláról építené fel az értesítési rendszert, használhat külső könyvtárakat. A Toastr az egyik legnépszerűbb könyvtár az értesítések létrehozására JavaScript alkalmazásokban.

A Toastr Library telepítése

Először is hozzon létre egy React alkalmazást, amellyel dolgozni fog. tudsz Hozzon létre egy React alkalmazást a Vite segítségével.

Az alkalmazás létrehozása után telepítse a toastr csomagot a projektben a következő parancs futtatásával a terminálon:

npm install --save toastr

Most telepítette a toastr csomagot, és értesítések megjelenítésére használhatja.

Értesítések létrehozása a Toastr

Az értesítések létrehozásához használja a toastr funkció. A toastr funkció pirítós üzenetek létrehozására és megjelenítésére szolgál. Az értesítések létrehozása előtt győződjön meg arról, hogy importálja azokat toastr értesítési stílusokat a CSS-fájlban.

@import'toastr';

Íme egy példa arra, hogyan hozhat létre értesítést a toastr funkció:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Ebben a példában definiálja a értesítse funkció. A Kattints ide gomb meghívja a értesítse funkciót, ha rákattint. A értesítse függvény a pirítós.siker funkciót a sikerértesítés megjelenítéséhez.

A pirítós.siker függvény két argumentumot vesz fel. Az első argumentum az értesítési üzenet, amely ebben az esetben a karakterlánc "Jó, hogy itt vagy". A második argumentum az értesítés címe, "Üdvözöljük".

Az alábbi képhez hasonló értesítés jelenik meg, amikor rákattint a gombra Kattints ide gomb.

Amellett, hogy a pirítós.siker funkció, a toastr objektum egyéb funkciókat is biztosít az értesítések létrehozásához. A többi funkció a toastr.hiba, pirítós.figyelmeztetés, és toastr.info. Mindegyik funkció egy értesítést hoz létre más háttérszínnel és ikonnal, így könnyedén megkülönböztetheti a különböző típusú értesítéseket.

Például amikor a toastr.hiba függvényében az értesítés így fog kinézni:

Az értesítések testreszabása

A Toastr könyvtárral ellentétben a hagyományos CSS használatával nem szabhatja személyre az értesítéseket amikor a React-Toastify-val dolgozik. A Toastr azonban továbbra is kínál más lehetőségeket az értesítések testreszabására. Ezekkel a lehetőségekkel személyre szabhatja az értesítések pozícióját, megjelenését és funkcióit. Az opciókat át kell adnia a harmadik argumentumnak toastr módszer.

Íme egy példa:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 closeButton: true,
 progressBar: true,
 timeOut: 3000,
 positionClass: "toast-top-center",
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

Az értesítés testreszabásához ez a kód a bezárás gomb, fejlődésmutató, időtúllépés, pozícióClass, showMethod, és elrejtési módszer az opciók objektum tulajdonságai. A bezárás gomb tulajdonság határozza meg, hogy az értesítés megjelenik-e a bezárás gombbal. Logikai értéket fogad el.

Használni a fejlődésmutató tulajdonságot, felvehet egy folyamatjelző sávot az értesítéshez. Beállítása a időtúllépés tulajdonság lehetővé teszi annak szabályozását, hogy mennyi ideig jelenjenek meg az értesítések. Ez a tulajdonság azt határozza meg, hogy hány ezredmásodperc múlva tűnik el automatikusan az értesítés.

A pozícióClass tulajdonság határozza meg az értesítés helyét a képernyőn. Nyolc előre meghatározott értéket fogad el. Az értékek a következőket tartalmazzák:

• pirítós-jobbra fent: Megjeleníti az értesítést a képernyő jobb felső sarkában.
• pirítós-bal felső: Az értesítés a képernyő bal felső sarkában jelenik meg.
• toast-top-center: Az értesítés a képernyő felső részén, közepén jelenik meg.
• pirítós-alul-jobb: Az értesítést a képernyő jobb alsó sarkában fogja látni.
• pirítós-alul-bal: Az értesítés a képernyő bal alsó sarkában jelenik meg.
• toast-bottom-center: Az értesítést a képernyő alsó részén, közepén találja.
• pirítós-top-teljes szélességben: Az értesítés a képernyő tetején jelenik meg, kitöltve a képernyő teljes szélességét.
• pirítós-alsó-teljes szélességű: Az értesítés a képernyő teljes szélességét kitölti, és a képernyő alján jelenik meg.

Végül a showMethod és elrejtési módszer A tulajdonságok szabályozzák az értesítés megjelenítéséhez és elrejtéséhez szükséges animációkat. A showMethod tulajdonság megadja az értesítés megjelenítéséhez használt animációt, míg a elrejtési módszer tulajdonság határozza meg az értesítés elrejtéséhez használt animációt.

A fenti kódblokkban meghatározott értesítés megjelenik a képernyő felső részén, egy folyamatjelző sávval és egy bezárás gombbal. Három másodperc elteltével eltűnik, és be- és kiúsztatással jelenik meg és eltűnik.

Valahogy így fog kinézni.

Vegye figyelembe, hogy minden Toastr-értesítést testreszabhat egyetlen beállításobjektummal, ahelyett, hogy egyenként testreszabná őket. Ehhez használja a pirítós.lehetőségek ingatlan. Ez a tulajdonságobjektum tartalmazza az összes Toastr-értesítés testreszabási tulajdonságait.

Például:

import React from"react";
import toastr from"toastr";
functionApp() {
 toastr.options = {
 closeButton: true,
 progressBar: true,
 positionClass: "toast-top-right",
 timeOut: 5000,
 showMethod: "fadeIn",
 hideMethod: "fadeOut",
 };
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome");
 };
const displayError = () => {
 toastr.error("You ran into an error", "Sorry");
 };
return (



Click Me</button>
Error</button>
 </div>
 );
}
exportdefault App;

Ez a példa bemutatja, hogyan kell beállítani az összes értesítést úgy, hogy a jobb felső sarokban legyen folyamatjelző sáv, bezárás gomb, kijelző a képernyő sarkában, 5 másodperc elteltével automatikusan bezárul, és be- és kiúsztatási átmenetekkel jelennek meg és eltűnik.

Az alkalmazás futtatása és a gombokra kattintva az alábbi képhez hasonló felület jelenik meg.

Tegye interaktívvá az értesítéseit

Interaktivitás hozzáadásával, például a rájuk való kattintás lehetőségével vonzóbbá teheti az értesítéseket. Ehhez használja a kattintásra ingatlan. A kattintásra tulajdonság a Toastr könyvtár által kínált testreszabási lehetőségek egyike. Meghatároz egy funkciót, amely akkor fut le, amikor az értesítésre kattint, hasonlóan a kattintson az eseményre (a JavaScript egyik eseményfigyelője).

Íme egy példa arra, hogyan kell használni a kattintásra ingatlan:

import React from"react";
import toastr from"toastr";
functionApp() {
const notify = () => {
 toastr.success("It is nice to have you here", "Welcome", {
 onclick: () => {
 toastr.clear();
 },
 });
 };
return (



Click Me</button>
 </div>
 );
}
exportdefault App;

A fenti kódblokkban az opciók objektuma a pirítós.siker függvény tartalmaz egy kattintásra ingatlan. A kattintásra ingatlan hívja a pirítós.tiszta funkció, amely törli az értesítést a képernyőről.

Hozzon létre vonzó értesítéseket a Toastr

Itt megtanulta, hogyan használhatja a Toastr könyvtárat a React alkalmazáshoz kapcsolódó értesítések létrehozására. Telepítette a Toastr-t, beállította az alkalmazásban, valamint létrehozta és személyre szabta az értesítéseket. A Toastr egy hatékony könyvtár, amely segíthet informatív és tetszetős értesítések létrehozásában. A Toastron kívül más könyvtárakat is kipróbálhat, mint például a SweetAlert, a React-Toastify vagy a Chakra UI.