Aangepaste waarschuwingen maken in React met behulp van React-Toastify

Waarschuwingsberichten worden vaak gebruikt in webapps om waarschuwingen, fouten, succesberichten en andere waardevolle informatie weer te geven.

Er zijn een paar populaire pakketten en frameworks voor het maken van waarschuwingsberichten in React. React-Toastify is een React-bibliotheek waarmee u meldingen en waarschuwingsberichten aan uw toepassingen kunt toevoegen.

React Toastify installeren

Om Toastify in uw React-project te installeren, voert u deze opdracht uit in uw projectdirectory:

npm install --save reactie-toastify

Toastify instellen

Om het Toastify-pakket te gebruiken, moet u het Toastcontainer, geroosterd brood methode en het bijbehorende CSS-bestand dat door het pakket wordt geleverd.

De Toastcontainer in de app-component worden alle aangemaakte toastmeldingen opgeslagen.

importeren { ToastContainer, toast } van"reageren-toastify";
importeren'react-toastify/dist/ReactToastify.css';
functieapp() {
opbrengst(



 </div>
 );
}

U kunt de geroosterd brood methoden om toastmeldingen voor uw React-project te maken:

functieapp() {
const melden = () => toast.succes("Hallo daar!");
opbrengst(


Melden</button>

 </div>
 );
}

Als u op de knop klikt die deze code genereert, wordt het toast.succes methode, waarbij het de "Hallo daar!" snaar. Hierdoor wordt een toastmelding gemaakt die het bericht op het scherm weergeeft, zoals dit:

Merk op dat er verschillende soorten toastmethoden zijn die u kunt noemen, zoals toast.info(), toast.error(), toast.succes(), toast.waarschuwing(). Elk van deze methoden heeft een subtiele kleurstijl om het type bericht weer te geven.

Uw toastmeldingen positioneren

Standaard verschijnen toastmeldingen in de rechterbovenhoek van het scherm van de webapp. U kunt dit wijzigen door de eigenschap position in te stellen op de Toastcontainer. Er zijn zes positiewaarden beschikbaar: rechtsboven, middenboven, linksboven, rechtsonder, middenonder en linksonder.

Bijvoorbeeld:

functieapp() {
const melden = () => toast.succes("Hallo daar!");
opbrengst(


Melden</button>
"linksboven"/>
 </div>
 );
}

Instellen van de positiesteun op de Toastcontainer naar linksboven zorgt ervoor dat alle toastmeldingen verschijnen vanaf de linkerbovenhoek van het scherm.

U kunt de standaardpositie voor individuele toastmeldingen wijzigen met behulp van de positiesteun van de geroosterd brood methoden:

functieapp() {
const melden = () => toast.succes("Hallo daar!", {positie: geroosterd brood. POSITION.TOP_CENTER});
opbrengst(


Melden</button>
"linksboven"/>
 </div>
 );
}

U kunt ook Toast-meldingen plaatsen met behulp van de eigenschap CSS position, maar de positiesteun van Toastify is de standaardmanier om dit te doen.

Omgaan met de autoClose Prop van de Toast Method en ToastContainer

U kunt de weergavetijd van toastmeldingen wijzigen. U kunt bepalen hoe lang een toastmelding open blijft met behulp van de automatisch sluiten prop. U kunt de vertragingstijd voor alle toastmeldingen en individueel specifieke toastmeldingen wijzigen. De automatisch sluiten prop accepteert alleen de booleaanse waarde false of een duur in milliseconden.

Gebruik de om de vertragingstijd voor alle toastmeldingen te wijzigen automatisch sluiten prop binnen de Toastcontainer element.

Bijvoorbeeld:

functieapp() {
const melden = () => toast.succes("Hallo daar!");
opbrengst(


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

Met de bovenstaande instellingen worden alle toastmeldingen precies vijf seconden (5.000 milliseconden) weergegeven.

De... gebruiken automatisch sluiten eigendom van elk geroosterd brood methode, kunt u de vertragingstijd voor individuele toastmeldingen aanpassen.

Bijvoorbeeld:

functieapp() {
const verwittigEen = () => toast.info("Sluit binnen 10 seconden", {automatisch sluiten: 10000});
const verwittigTwee = () => toast.info("Sluit binnen 15 seconden", {automatisch sluiten: 15000});
opbrengst (


Breng één op de hoogte</button>
Breng Twee op de hoogte</button>

 </div>
 );
}

Om te voorkomen dat de toastmelding standaard wordt gesloten, kunt u de automatisch sluiten steunen op vals. U kunt ervoor zorgen dat de gebruiker elke toastmelding handmatig moet sluiten door de automatisch sluiten prop van de Toastcontainer tot vals.

Bijvoorbeeld:

functieapp() {
const melden = () => toast.info("Hallo daar!");
opbrengst (


Melden</button>
vals} />
 </div>
 );
}

Het instellen van de automatisch sluiten prop van individu geroosterd brood methoden om vals zorgt er ook voor dat die specifieke toastmeldingen niet standaard sluiten.

Niet-tekenreeksmeldingen weergeven met Toastify

U kunt tekenreeksen weergeven, componenten reageren en getallen als meldingsberichten wanneer u met toastmeldingen werkt. Om een ​​React-component weer te geven als een toastmelding, maakt u de component en geeft u deze weer met behulp van een geroosterd brood methode.

Bijvoorbeeld:

functieBericht({toastProps, closeToast}) {
opbrengst (


Welkom {toastProps.position}</p>
</button>
 </div>
 )
}
exporterenstandaard Bericht;

Dit codeblok maakt een component, Bericht. Bij het renderen van een component als melding, voegt toast toe toastProps En sluitenToast rekwisieten voor uw component. De sluitenToast prop is een functie die u kunt gebruiken om de melding te sluiten. De toastProps prop is een object met eigenschappen waarin details over de toastmelding worden opgeslagen, inclusief de positie, het type en andere kenmerken.

Importeer de berichtcomponent en geef deze door aan de functie toast() om deze als een toastmelding weer te geven:

importeren { ToastContainer, toast } van"reageren-toastify";
importeren'react-toastify/dist/ReactToastify.css';
importeren Bericht van"./componenten/Bericht";
functieapp() {
const bericht = () => geroosterd brood(<Bericht />);
opbrengst (


Welkom</button>

 </div>
 );
}

Als u op de knop klikt, verschijnt er een melding met een vraag en twee knoppen op uw scherm.

Styling Toast-meldingen

U hoeft niet de standaardstijl te gebruiken voor uw toastmeldingen. U kunt ze aanpassen aan een gewenst ontwerpthema of patroon dat geschikt is voor uw webtoepassing.

Om je toastmelding te stylen, geef je het een naam van de klasse En pas de aanpassingen toe binnen een CSS-bestand.

Bijvoorbeeld:

functieapp() {
const melden = () => toast.succes("Hallo daar!", {naam van de klasse: "toastbericht"});
opbrengst (


Melden</button>
"midden boven" />
 </div>
 );
}

Met de naam van de klasse toegevoegd aan uw melding, kunt u de toastmelding naar uw voorkeur vormgeven in het CSS-bestand:

.toast-bericht {
Achtergrond kleur: #000000;
kleur: #FFFFFF;
lettertypegrootte: 20px;
opvulling: 1rem 0.5rem;
}

Als resultaat van de bovenstaande aangepaste styling ziet de melding er als volgt uit:

Toastmeldingen voor uw webtoepassing

U kunt nu aangepaste waarschuwingen maken in React met behulp van het React-Toastify-pakket en de beschikbare methoden. Door deze aangepaste waarschuwingen/meldingen naar uw voorkeur te stylen, kunt u de gebruikerservaring van uw webtoepassing verbeteren.

React-Toastify biedt een snelle en effectieve methode om zonder gedoe aangepaste waarschuwingen in uw React-project op te nemen.