Introduction
In this post, let us see how we can leverage on the toastr module to display a flying notification.
Focus on Code
Let us start by creating a new web part project using yeoman SharePoint generator, before that create a folder where you want to create the web part. Navigate to that folder and run the below command
yo @microsoft/sharepoint
The generator will asks you couple of questions,
- Enter the webpart name as your solution name, and then select Enter.
- Select Create a subfolder with solution name for where to place the files.
- Select Y to allow the solution to be deployed to all sites immediately.
- Select N on the question if solution contains unique permissions.
- Enter the webpart name
- Enter the webpart description
- Choose the framework as ‘React‘
Once the project is created, install the toastr module from npm using the below command.
npm install toastr --save
npm install @types/toastr --save-dev
Open the code in VSCode which is my favorite and flexible code editor for SharePoint Framework. You can directly open the project folder from the file menu or use the below command to open the VSCode from command line.
cd \web part folder\
code .
Navigate to your <webpart>.tsx file. Copy-paste the below code.
import * as React from 'react';
import styles from './ToastrSample.module.scss';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { IToastrSampleProps } from './IToastrSampleProps';
import { SPComponentLoader } from '@microsoft/sp-loader';
import * as toastr from 'toastr';
export default class ToastrSample extends React.Component<IToastrSampleProps, {}> {
constructor(props: IToastrSampleProps) {
super(props);
SPComponentLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css');
}
public _showToastrMessage = (scope: string) => {
toastr.options.hideDuration = 5000;
switch (scope) {
case "success":
toastr.success("This is a success message!");
break;
case "info":
toastr.info("This is an info message!");
break;
case "warning":
toastr.warning("This is a warning message!");
break;
case "error":
toastr.error("This is a Error message!");
break;
}
}
public render(): React.ReactElement<IToastrSampleProps> {
return (
<div className={styles.toastrSample}>
<div className={styles.container}>
<div className={styles.row}>
<div className={styles.column}>
<DefaultButton onClick={() => { this._showToastrMessage('success') }}>Success</DefaultButton>
<DefaultButton onClick={() => { this._showToastrMessage('info') }}>Info</DefaultButton>
<DefaultButton onClick={() => { this._showToastrMessage('warning') }}>Warning</DefaultButton>
<DefaultButton onClick={() => { this._showToastrMessage('error') }}>Error</DefaultButton>
</div>
</div>
</div>
</div>
);
}
}
Let us walkthrough the code and see what we had done.
- We have included 2 imports apart from the default, SPComponentLoader and toastr. SPComponentLoader is used to load the stylesheet from the cdn. You can also have the css inside your project.
- Created a separate method to call the toastr based on the message scope whether it is success, info, warning or error. The typings we installed above will provide the intellicense and thats the reason it is needed only at the time of development, so we installed as a dev depenedency.
- Design the render component with set of buttons and call the method defined above with specific params.
- We can also set some options defined in the toastr. Please click here to get the full list of options that can be overriden.
Preview
Source Code
The source code along with other samples can be found in the below github link.
Happy Coding…
Knowledge Share 
Hey sudharsan,
I used the above toastr. But when user redirect from one page to another toastr does not alive it goes away.
LikeLiked by 1 person
Hi, let me know what you are trying to achieve. The toastr component is added to the DOM of the page. Once navigated it will disappear.
LikeLiked by 1 person
@Sudharsan – I don’t want to disappear after navigate will it be possible
LikeLiked by 1 person
As I mentioned the component will add the div to the DOM. If u want to display on postback or load you have to initiate again. You can try sticky option but I dont think that will stay on refresh or reload.
LikeLiked by 1 person