Reusable React controls for your SharePoint Framework solutions ¶
This repository provides developers with a set of reusable React controls that can be used in SharePoint Framework (SPFx) solutions. The project provides controls for building web parts and extensions.
Attention
In order to migrate to v3
it is adviced to follow this guide: Migrating from V1.
Library Versions¶
Currently there are 3 active versions of the controls. Please, reference the table below to see what version to use in your project.
Version | SPFx minimal dependency | Fluent UI (Office UI Fabric React) version | SharePoint Version | Comments |
---|---|---|---|---|
v3 |
1.13.* |
7.174.1 |
Online | The most current, actively maintained version of the library. |
v2 |
1.11.0 |
6.214.0 |
Online | The last major version is 2.9.0. We strongly recommend to update to SPFx 1.13.* and v3 of Controls. |
v1 |
1.3.0 |
5.131.0 |
On-Prem | The version is maintained for SharePoint On-Prem 2016 and 2019 implementations. Be aware that the controls might not work in solutions you're building for on-premises as SharePoint On-Prem is based on SPFx 1.1.0 . |
Attention
If you are using v3
of the Controls with SPFx 1.12.1
you will need to cast web part context to any
to pass it to the controls.
Getting started¶
Installation¶
To get started you have to install the following dependency to your project: @pnp/spfx-controls-react
.
Enter the following command to install the dependency to your project:
npm install @pnp/spfx-controls-react --save --save-exact
Configuration¶
Note
Since v1.4.0
the localized resource path will automatically be configured during the dependency installing.
Once the package is installed, you will have to configure the resource file of the property controls to be used in your project. You can do this by opening the config/config.json
and adding the following line to the localizedResources
property:
"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
Telemetry¶
All controls gather telemetry to verify the usage. Only the name of the control and related data gets captured.
More information about the service that we are using for this can be found here: PnP Telemetry Proxy.
Since version 1.17.0
it is possible to opt-out of the telemetry by adding the following code to your web part:
import PnPTelemetry from "@pnp/telemetry-js";
...
const telemetry = PnPTelemetry.getInstance();
telemetry.optOut();
Available controls¶
The following controls are currently available:
- AccessibleAccordion (Control to render an accordion. React
AccessibleAccordion
-based implementation) - Accordion (Control to render an accordion)
- AdaptiveCardHost (Control to render Adaptive Cards)
- AdaptiveCardDesignerHost (Control to render Adaptive Cards Designer)
- AnimatedDialog (Animated dialog control)
- Carousel (Control displays children elements with 'previous/next element' options)
- Charts (makes it easy to integrate Chart.js charts into web part)
- ComboBoxListItemPicker (allows to select one or more items from a list)
- ContentTypePicker (Control to pick a content type)
- Dashboard (Control to render dashboard in Microsoft Teams)
- DateTimePicker (DateTime Picker)
- DragDropFiles (Allow drag and drop of files in selected areas)
- DynamicForm (Dynamic Form component)
- EnhancedThemeProvider (Enhanced version of Fluent UI Theme Provider control used to improve support for themes and fonts when creating Tab or Personal App in SPFx for Teams or creating Isolated Web Parts)
- FieldCollectionData (control gives you the ability to insert a list / collection data which can be used in your web part / application customizer)
- FieldPicker (control to pick one or multiple fields from a list or a site)
- FilePicker (control that allows to browse and select a file from various places)
- FileTypeIcon (Control that shows the icon of a specified file path or application)
- FolderExplorer (Control that allows to browse the folders and sub-folders from a root folder)
- FolderPicker (Control that allows to browse and select a folder)
- GridLayout (control that renders a responsive grid layout for your web parts)
- HoverReactionsBar (control that allows you to select an emoji from emoji bar or select from picker)
- IconPicker (control that allows to search and select an icon from office-ui-fabric icons)
- IFrameDialog (renders a Dialog with an iframe as a content)
- IFramePanel (renders a Panel with an iframe as a content)
- ListItemComments (controls that allows to manage list item comments similarly to out-of-the box experience)
- ListItemPicker (allows to select one or more items from a list)
- ListPicker (allows to select one or multiple available lists/libraries of the current site)
- ListView (List view control)
- LivePersona (Live Persona control)
- LocationPicker (Location Picker control)
- Map (renders a map in a web part)
- ModernAudio (Modern Audio control)
- ModernTaxonomyPicker (Modern Taxonomy Picker)
- MonacoEditor (Monaco Editor)
- MyTeams (My Teams)
- PeoplePicker (People Picker)
- Placeholder (shows an initial placeholder if the web part has to be configured)
- Progress (shows progress of multiple SEQUENTIALLY executed actions)
- ProgressStepsIndicator.md (shows a progress of steps)
- SecurityTrimmedControl (intended to be used when you want to show or hide components based on the user permissions)
- SiteBreadcrumb (Breadcrumb control)
- SitePicker (Site Picker control)
- TaxonomyPicker (Taxonomy Picker)
- TeamChannelPicker (Team Channel Picker)
- TeamPicker (Team Picker)
- TermSetNavigation (Team Picker)
- Toolbar (Control to render Toolbar in Microsoft Teams)
- TreeView (Tree View)
- UploadFiles (Upload Files)
- VariantThemeProvider (Variant Theme Provider)
- ViewPicker (View Picker Control)
- WebPartTitle (Customizable web part title control)
Field customizer controls:
Note
If you want to use these controls in your solution, first check out the start guide for these controls: using the field controls.
- FieldAttachmentsRenderer (renders Clip icon based on the provided
count
property is defined and greater than 0) - FieldDateRenderer (renders date string as a simple text)
- FieldFileTypeRenderer (renders document or folder icon based on file path)
- FieldLookupRenderer (renders lookup values)
- FieldNameRenderer (renders document's name as a link)
- FieldTaxonomyRenderer (renders terms from Managed Metadata field)
- FieldTextRenderer (renders simple text)
- FieldTitleRenderer (renders title either as a simple text or as a link to the Display Form)
- FieldUrlRenderer (renders Hyperlink or Picture field value as a link or image)
- FieldUserRenderer (renders each referenced user/group as a link on a separate line)