SharePoint Framework (SPFx) Tab Control (react)

Hi Friends,

This time I have worked upon a tab control which is still missing from Microsoft sample collection. I personally felt this tab control webpart can be of use in many scenarios.

I have used the Rich Text editor for the implementation, where whenever a new tab is added , the text editor automatically gets associated with the tab. Since it is the rich text editor so you can do almost everything you want to display with all the custom formatting options available.

Source Code on GitHub

Features !

  • No configuration for the webpart to use
  • Safe and fast as there is no external saving of data
  • Rich Text editor increases lot of possibilities how you use it
  • Light weight control


$ npm install
$ gulp clean
$ gulp bundle --ship
$ gulp package-solution --ship

Below are some of the images that demonstrates the webpart.

View Mode

SharePoint Framework (SPFx) Tab Control (react)

Edit Mode

SharePoint Framework (SPFx) Tab Control (react)

Please provide your comments , if you need any more feature or how you like the control.

Happy Coding
Sumit Kanchan
#SharePointWidgets #SharePointFramework


  1. Hi, is it possible to change the control to use React Boostrap Tab?

    1. Yes of course you can do, but there might be change in some code for it to be fully functional

    2. i tried to change the rich text to use pnp spfx controls rich text instead of react-rte, but it seems like its not working at all. can you specify which part of the code that require to be change? Thanks :)

    3. I will get on this to you in couple of day as I need to look into the code again

    4. Hi Shah,

      Please replace the RichTextEditor control with the one you want to use and pass on the corresponding parameters as per your control. in tab.tsx file

  2. hi, your web part is working really well. however, i realized that the web part wont work in IE. Is there any configurations need to be done?

    And is it possible to use pnp spfx controls rich text editor?

    1. Hi Luke, SPFx has issues while using the IE, I have not checked with IE, i'll have a look and then will let you know if something can be done

    2. Hi Sumit,

      Web part is working really well, but I need nested tabs, can I change the code?

  3. Hello, any progress with the IE issue?


Post a Comment

Popular posts from this blog

Rename Folder using Microsoft Flow / Power Automate in a Document Library in SharePoint Online

Power Automate: How to Add "New Line" to the text in SharePoint multiline text field

Power Automate: Rename file in SharePoint Online