Introduction

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.

@pnp

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

@microsoft/mgt

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

Reference: @microsoft/mgt / Sample Code

Handlebars

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

Reference: handlebars

Lodash

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

Reference: lodash

Moment.js

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

jQuery.Highlight.js

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

react-js-pagination

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

react-render-html

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

Reference: react-render-html

react-slick

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

Reference: react-slick

throttle-debounce

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

toastr

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

react-dropzone

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

Reference: react-dropzone / Sample Code

image-resize

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

csvtojson

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

Reference: csvtojson / Sample Code

json2csv

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

Reference: json2csv

react-editable-table

This libary provides us an inline editable table experience.

Reference: react-editable-table

spfx-navigation

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

Reference: spfx-navigation

Happy Coding…