Hogyan hozhat létre egyéni figyelmeztetéseket a React-ban a React-Toastify használatával

A figyelmeztető üzeneteket gyakran használják a webes alkalmazásokban figyelmeztetések, hibák, sikerüzenetek és egyéb értékes információk megjelenítésére.

Van néhány népszerű csomag és keretrendszer a figyelmeztető üzenetek készítésére a Reactban. A React-Toastify egy React könyvtár, amely lehetővé teszi, hogy értesítéseket és figyelmeztető üzeneteket adjon hozzá alkalmazásaihoz.

A React Toastify telepítése

A Toastify React projektbe való telepítéséhez futtassa ezt a parancsot a projektkönyvtárban:

npm install --save react-toastify

A Toastify beállítása

A Toastify csomag használatához importálnia kell a ToastContainer, pirítós módszert és a csomag által biztosított kísérő CSS-fájlt.

A ToastContainer az App komponensen belül tárolja az összes létrehozott pohárköszöntőt.

import { ToastContainer, pirítós } tól től"reagálni-pirítani";
import"react-toastify/dist/ReactToastify.css";
funkcióApp() {
Visszatérés(



 </div>
 );
}

Használhatja a pirítós módszerek pohárköszöntések létrehozására a React projekthez:

funkcióApp() {
const értesíteni = () => pirítós.siker("Szia!");
Visszatérés(


Értesítés</button>

 </div>
 );
}

A kód által generált gombra kattintva meghívja a pirítós.siker módszerrel, átadva neki a "Hello There!" húr. Ez létrehoz egy pohárköszöntőt, amely megjeleníti az üzenetet a képernyőn, például:

Vegye figyelembe, hogy különböző típusú pirítós módszereket hívhat meg, mint pl toast.info(), toast.error(), pirítós.siker(), toast.warning(). Ezen módszerek mindegyike finom színstílussal rendelkezik, hogy tükrözze az üzenet típusát.

A Toast-értesítések elhelyezése

Alapértelmezés szerint a pirítósértesítések a webalkalmazás képernyőjének jobb felső sarkában jelennek meg. Ezt a pozíció tulajdonság beállításával módosíthatja ToastContainer. Hat pozícióérték áll rendelkezésre: jobb felső, felső közép, bal felső, jobb alsó, alsó közép és bal alsó.

Például:

funkcióApp() {
const értesíteni = () => pirítós.siker("Szia!");
Visszatérés(


Értesítés</button>
"bal felső"/>
 </div>
 );
}

A helyzettámasz beállítása a ToastContainer a bal felső sarokban biztosítja, hogy az összes pirítósértesítés felbukkanjon a képernyő bal felső sarkában.

Módosíthatja az egyes pirítós-értesítések alapértelmezett pozícióját a pozíciójavító használatával pirítós mód:

funkcióApp() {
const értesíteni = () => pirítós.siker("Szia!", {pozíció: pirítós. POSITION.TOP_CENTER});
Visszatérés(


Értesítés</button>
"bal felső"/>
 </div>
 );
}

A Toast-értesítéseket is elhelyezheti a CSS pozíció tulajdonság használatával, de a Toastify pozíciótámasza a szokásos módja ennek.

A Toast Method és a ToastContainer autoClose Propjának kezelése

Módosíthatja a pirítósértesítések megjelenítési idejét. A gombbal szabályozhatja, hogy mennyi ideig maradjon nyitva egy pohárköszöntőről szóló értesítés autoClose támaszt. Módosíthatja az összes pirítósértesítés késleltetési idejét és az egyedi pirítósértesítéseket. A autoClose A prop csak a false logikai értéket vagy ezredmásodpercben megadott időtartamot fogadja el.

Az összes pirítósértesítés késleltetési idejének módosításához használja a autoClose támasz a ToastContainer elem.

Például:

funkcióApp() {
const értesíteni = () => pirítós.siker("Szia!");
Visszatérés(


Értesítés</button>
5000}/>
 </div>
 );
}

A fenti beállításokkal az összes pirítósértesítés pontosan öt másodpercig (5000 ezredmásodpercig) jelenik meg.

Használni a autoClose mindegyik tulajdonsága pirítós módszerrel testreszabhatja az egyes pirítósértesítések késleltetési idejét.

Például:

funkcióApp() {
const notifyOne = () => toast.info("10 másodpercen belül bezár", {autoClose: 10000});
const notifyTwo = () => toast.info("15 másodpercen belül bezár", {autoClose: 15000});
Visszatérés (


Értesítsen egyet</button>
Értesítsen Kettőt</button>

 </div>
 );
}

Ha meg szeretné akadályozni, hogy a pirítósértesítés alapértelmezés szerint bezáruljon, beállíthatja a autoClose támaszt hamis. Biztosíthatja, hogy a felhasználó manuálisan zárjon be minden pirítós értesítést, ha beállítja a autoClose kelléke a ToastContainer hogy hamis.

Például:

funkcióApp() {
const értesíteni = () => toast.info("Szia!");
Visszatérés (


Értesítés</button>
hamis} />
 </div>
 );
}

Beállítása a autoClose egyén kelléke pirítós módszereket hamis azt is biztosítja, hogy az adott pirítósértesítések alapértelmezés szerint ne zárjanak be.

Nem karakterláncos értesítések megjelenítése a Toastify segítségével

Ha a pirítósértesítésekkel dolgozik, értesítési üzenetként jeleníthet meg karakterláncokat, reagálhat az összetevőkre és a számokra. Ha egy React összetevőt pirítós értesítésként szeretne megjeleníteni, akkor létre kell hoznia az összetevőt, és elő kell írnia a a segítségével pirítós módszer.

Például:

funkcióÜzenet({toastProps, closeToast}) {
Visszatérés (


Üdvözöljük {toastProps.position}</p>
</button>
 </div>
 )
}
exportalapértelmezett Üzenet;

Ez a kódblokk létrehoz egy komponenst, Üzenet. Amikor egy összetevőt értesítésként jelenít meg, a pirítós hozzáad pirítós Kellékek és closeToast kellékeket az alkatrészéhez. A closeToast A prop egy funkció, amellyel bezárhatja az értesítést. A pirítós Kellékek A prop egy olyan tulajdonságokkal rendelkező objektum, amely a pirítós értesítés részleteit tárolja, beleértve a helyzetét, típusát és egyéb jellemzőit.

Importálja az Üzenet összetevőt, majd adja át a toast() függvénynek, és köszöntő értesítésként jelenítse meg:

import { ToastContainer, pirítós } tól től"reagálni-pirítani";
import"react-toastify/dist/ReactToastify.css";
import Üzenet tól től"./components/Message";
funkcióApp() {
const msg = () => pirítós(<Üzenet />);
Visszatérés (


Üdvözöljük</button>

 </div>
 );
}

A gombra kattintva egy kérdést és két gombot tartalmazó értesítés jelenik meg a képernyőn.

Styling Toast Notifications

Nem kell az alapértelmezett stílust használnia a pirítósértesítésekhez. Testreszabhatja őket, hogy illeszkedjenek a kívánt tervezési témához vagy mintához, amely illeszkedik a webalkalmazásához.

A pirítósértesítés stílusának módosításához adja meg a osztály név és alkalmazza a testreszabásokat egy CSS-fájlban.

Például:

funkcióApp() {
const értesíteni = () => pirítós.siker("Szia!", {osztály név: "pirítós üzenet"});
Visszatérés (


Értesítés</button>
"felső középen" />
 </div>
 );
}

A... val osztály név az értesítéshez csatolva a pohárköszöntőt ízlése szerint alakíthatja a CSS-fájlban:

.pirítós-üzenet {
háttérszín: #000000;
szín: #FFFFFF;
betűméret: 20px;
párnázás: 1rem 0.5rem;
}

A fenti egyedi stílus eredményeként az értesítés így fog kinézni:

Toast-értesítések webalkalmazásához

Mostantól egyéni riasztásokat hozhat létre a React alkalmazásban a React-Toastify csomag és annak elérhető módszerei segítségével. Ha ezeket az egyéni figyelmeztetéseket/értesítéseket ízlése szerint alakítja, javíthatja webalkalmazása felhasználói élményét.

A React-Toastify gyors és hatékony módszert kínál az egyéni riasztások felhajtás nélküli felvételére a React projektbe.