SPFx – NPM Packages


Hi friends, in this post, we will see some of the NPM packages that could benefit the development in SharePoint Framework components (web parts, extensions, etc.). The below-mentioned packages are purely based on my experience, and there are lots of other packages available not covered in this post. I will update this post whenever I came across a new package.

Let’s see the list of packages in detail.


I assume almost 80 – 90% of the SharePoint developers had used this helper module to speed up the development process. Using this library is very easy, can minimize your coding lines from thousands to hundreds and provide us with more significant code maintenance. They also provide us some re-usable controls that can be used in SPFx web part or extensions, property controls that can be used to design the web part properties.

Reference: @PnP / Sample Code / Sample Graph API Code


The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.

Reference: @microsoft/mgt / Sample Code


This is a famous template helper module that allow us to keep the view and the code separate.

Reference: handlebars


This is a utility library mostly used to manipulate or perform different operations with the data like filter, find, select, etc.

Reference: lodash


I hope everyone is aware of this library when it comes to date and time, our first and only choice to use moment.js library.

Reference: moment


The library is used to search and highlight the text mapped to a particular container. This works like same as the browser search but it can be restricted to a specific div or paragraph, etc. It depends on jQuery, so jQuery module has to be loaded before using this library.

Reference: jQuery.Highlight.js


This library provides us with the bootstrap style pagination. Instead of defining our custom links and navigation for pagination, using this library with the configuration properties save time.

Reference: react-js-pagination


This library renders HTML as React element replacing dangerouslySetInnerHTML. It renders a provided HTML string in to a React elements.

Reference: react-render-html


This is a carousel component library built with React and it is strongly supported with SPFx.

Reference: react-slick


This library allows us to rate-limit our functions in multiple ways. Passing a delay and callback will help us in scenarios like live search where users were typing in some search terms. We can use this library to hold for a while until the user finishes typing their search terms and then executing the function.

Reference: throttle-debounce


This library will help us to provide end users with a non-blocking notifications.

Reference: toastr / Sample Code

Fluent UI React Hooks

Helpful hooks not provided by React itself. These hooks were built for use in Fluent UI React and we can also use in SPFx.

Reference: @uifabric/react-hooks


This library provides a React hook to create a HTML5-compliant drag’n’drop zone for files.

Reference: react-dropzone / Sample Code


This library is used to generate image of different size and it is very useful if there is a need to generate image thumbnails of different size.

Reference: image-resize / Sample Code


This library is a comprehensive nodejs csv parser to convert csv to json or column arrays.

Reference: csvtojson / Sample Code


This library converts json into csv with column titles and proper line endings.

Reference: json2csv


This libary provides us an inline editable table experience.

Reference: react-editable-table


This library provides a better navigation for the modern SharePoint Online with full page or partial redirection.

Reference: spfx-navigation

Happy Coding…


2 thoughts on “SPFx – NPM Packages

  1. Hi there! This post couldn’t be written much better! Reading through this article reminds me of my previous roommate! He continually kept talking about this. I am going to send this article to him. Fairly certain he’ll have a good read. Many thanks for sharing!

    Liked by 1 person

  2. Thank you a lot for providing individuals with an extremely special possiblity to discover important secrets from here. It really is so kind and as well , stuffed with amusement for me personally and my office co-workers to visit the blog more than 3 times weekly to study the latest tips you have got. Of course, I’m so usually pleased for the powerful suggestions served by you. Selected 2 areas in this post are undoubtedly the most efficient I have ever had.

    Liked by 1 person

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 )

Facebook photo

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

Connecting to %s