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.
The Microsoft Graph Toolkit is a collection of web components powered by the Microsoft Graph.
This is a famous template helper module that allow us to keep the view and the code separate.
This is a utility library mostly used to manipulate or perform different operations with the data like filter, find, select, etc.
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.
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.
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.
This library renders HTML as React element replacing dangerouslySetInnerHTML. It renders a provided HTML string in to a React elements.
This is a carousel component library built with React and it is strongly supported with SPFx.
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.
This library will help us to provide end users with a non-blocking notifications.
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.
This library provides a React hook to create a HTML5-compliant drag’n’drop zone for files.
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.
This library is a comprehensive nodejs csv parser to convert csv to json or column arrays.
This library converts json into csv with column titles and proper line endings.
This libary provides us an inline editable table experience.
This library provides a better navigation for the modern SharePoint Online with full page or partial redirection.