SPFx – Using toastr plugin

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.

SPFx-Demos

Happy Coding…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s