Sådan opretter du brugerdefinerede advarsler i React ved hjælp af React-Toastify

Advarselsmeddelelser bruges ofte i webapps til at vise advarsler, fejl, succesmeddelelser og andre værdifulde oplysninger.

Der er et par populære pakker og rammer til at lave alarmbeskeder i React. React-Toastify er et React-bibliotek, der giver dig mulighed for at tilføje meddelelser og alarmbeskeder til dine applikationer.

Installation af React Toastify

For at installere Toastify i dit React-projekt skal du køre denne kommando i din projektmappe:

npm install --save react-toastify

Opsætning af Toastify

For at bruge Toastify-pakken skal du importere ToastContainer, ristet brød metode og medfølgende CSS-fil leveret af pakken.

Det ToastContainer inde i App-komponenten gemmer alle toast-meddelelser oprettet.

importere { ToastContainer, toast } fra"reager-toastify";
importere'react-toastify/dist/ReactToastify.css';
fungereApp() {
Vend tilbage(



 </div>
 );
}

Du kan bruge ristet brød metoder til at oprette toast-notifikationer til dit React-projekt:

fungereApp() {
konst underrette = () => toast.success("Hej med dig!");
Vend tilbage(


Giv besked</button>

 </div>
 );
}

Ved at klikke på knappen, som denne kode genererer, kaldes den toast.succes metoden ved at give den "Hej!" snor. Dette vil oprette en toast-meddelelse, der viser meddelelsen på skærmen, sådan her:

Bemærk der er forskellige typer toastmetoder du kan kalde, som f.eks toast.info(), toast.error(), toast.success(), toast.warning(). Hver af disse metoder har en subtil farvestil, der afspejler typen af ​​budskab.

Placering af dine toast-meddelelser

Som standard dukker toast-notifikationer op fra øverste højre side af webappens skærm. Du kan ændre dette ved at indstille egenskaben position på ToastContainer. Der er seks tilgængelige positionsværdier: øverst til højre, øverst i midten, øverst til venstre, nederst til højre, nederst i midten og nederst til venstre.

For eksempel:

fungereApp() {
konst underrette = () => toast.success("Hej med dig!");
Vend tilbage(


Giv besked</button>
"øverst til venstre"/>
 </div>
 );
}

Indstilling af positionsstøtten på ToastContainer øverst til venstre sikrer, at alle toast-notifikationer dukker op fra øverste venstre side af skærmen.

Du kan ændre standardpositionen for individuelle toast-meddelelser ved at bruge positionsstøtten på ristet brød metoder:

fungereApp() {
konst underrette = () => toast.success("Hej med dig!", {position: toast. POSITION.TOP_CENTER});
Vend tilbage(


Giv besked</button>
"øverst til venstre"/>
 </div>
 );
}

Du kan også placere Toast-meddelelser ved at bruge egenskaben CSS position, men Toastifys positionsprop er standardmåden at gøre dette på.

Håndtering af autoClose Prop af Toast Method og ToastContainer

Du kan ændre visningstiden for toast-notifikationer. Du kan styre, hvor længe en toast-notifikation forbliver åben ved hjælp af autoluk rekvisit. Du kan ændre forsinkelsestiden for alle toast-notifikationer og individuel-specifikke toast-notifikationer. Det autoluk prop accepterer kun den boolske værdi false eller en varighed i millisekunder.

For at ændre forsinkelsestiden for alle toast-notifikationer skal du bruge autoluk prop inden for ToastContainer element.

For eksempel:

fungereApp() {
konst underrette = () => toast.success("Hej med dig!");
Vend tilbage(


Giv besked</button>
5000}/>
 </div>
 );
}

Med ovenstående indstillinger vil alle toast-meddelelser blive vist i præcis fem sekunder (5.000 millisekunder).

Bruger autoluk ejendom af hver ristet brød metode, kan du tilpasse forsinkelsestiden for individuelle toast-notifikationer.

For eksempel:

fungereApp() {
konst notifyOne = () => toast.info("Lukker om 10 sekunder", {autoluk: 10000});
konst notifyTwo = () => toast.info("Lukker om 15 sekunder", {autoluk: 15000});
Vend tilbage (


Giv besked til én</button>
Giv besked to</button>

 </div>
 );
}

For at forhindre toast-meddelelsen i at lukke som standard, kan du indstille autoluk støtte til falsk. Du kan sikre, at brugeren manuelt skal lukke hver toast-meddelelse ved at indstille autoluk rekvisit af ToastContainer til falsk.

For eksempel:

fungereApp() {
konst underrette = () => toast.info("Hej med dig!");
Vend tilbage (


Giv besked</button>
falsk} />
 </div>
 );
}

Indstilling af autoluk rekvisit af individ ristet brød metoder til falsk vil også sikre, at disse specifikke toast-meddelelser ikke lukker som standard.

Gengivelse af notifikationer uden streng med Toastify

Du kan gengive strenge, reagere komponenter og tal som notifikationsmeddelelser, når du arbejder med toast-notifikationer. For at gengive en React-komponent som en toast-notifikation, opretter du komponenten og gengiver den ved hjælp af en ristet brød metode.

For eksempel:

fungereBesked({toastProps, closeToast}) {
Vend tilbage (


Velkommen {toastProps.position}</p>
</button>
 </div>
 )
}
eksportStandard Besked;

Denne kodeblok opretter en komponent, Besked. Når du gengiver en komponent som en notifikation, tilføjer toast toastProps og closeToast rekvisitter til din komponent. Det closeToast prop er en funktion, som du kan bruge til at lukke meddelelsen. Det toastProps prop er et objekt med egenskaber, der gemmer detaljer om toast-meddelelsen, herunder dens position, type og andre karakteristika.

Importer meddelelseskomponenten, og send den derefter til toast()-funktionen, og render den som en toast-meddelelse:

importere { ToastContainer, toast } fra"reager-toastify";
importere'react-toastify/dist/ReactToastify.css';
importere Besked fra"./komponenter/Besked";
fungereApp() {
konst msg = () => ristet brød(<Besked />);
Vend tilbage (


Velkommen</button>

 </div>
 );
}

Hvis du klikker på knappen, vises en meddelelse med et spørgsmål og to knapper på din skærm.

Notifikationer om styling af toast

Du behøver ikke bruge standardstylingen til dine toast-notifikationer. Du kan tilpasse dem, så de passer til et ønsket designtema eller mønster, der passer til din webapplikation.

For at style din toast-notifikation skal du give den en klassenavn og anvende tilpasningerne i en CSS-fil.

For eksempel:

fungereApp() {
konst underrette = () => toast.success("Hej med dig!", {klassenavn: "toast-besked"});
Vend tilbage (


Giv besked</button>
"top-center" />
 </div>
 );
}

Med klassenavn vedhæftet din notifikation, kan du style toast-meddelelsen til din præference i CSS-filen:

.toast-besked {
baggrundsfarve: #000000;
farve: #FFFFFF;
skriftstørrelse: 20px;
polstring: 1rem 0.5rem;
}

Som et resultat af ovenstående brugerdefinerede styling vil meddelelsen se sådan ud:

Toast-meddelelser til din webapplikation

Du kan nu oprette brugerdefinerede advarsler i React ved hjælp af React-Toastify-pakken og dens tilgængelige metoder. Ved at style disse brugerdefinerede advarsler/meddelelser til dine præferencer, kan du forbedre brugeroplevelsen af ​​din webapplikation.

React-Toastify tilbyder en hurtig og effektiv metode til at inkludere brugerdefinerede advarsler i dit React-projekt uden besvær.