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 v2 it is advicded to follow this guide: Migrating from V1.

Placeholder example

Attention

The controls project has a minimal dependency on SharePoint Framework version 1.3.0. Be aware that the controls might not work in solutions your building for SharePoint 2016 with Feature Pack 2 on-premises. As for SharePoint 2016 with Feature Pack 2 version 1.1.0 of the SharePoint framework is the only version that can be used. SharePoint 2019 on-premises uses SharePoint framework v1.4.0 and therefore should be fine to use with these 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:

  • Accordion (Control to render an accordion)
  • 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)
  • DateTimePicker (DateTime Picker)
  • 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)
  • 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)
  • 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)
  • Map (renders a map in a web part)
  • PeoplePicker (People Picker)
  • Placeholder (shows an initial placeholder if the web part has to be configured)
  • Progress (shows progress of multiple SEQUENTIALLY executed actions)
  • SiteBreadcrumb (Breadcrumb control)
  • SecurityTrimmedControl (intended to be used when you want to show or hide components based on the user permissions)
  • TaxonomyPicker (Taxonomy Picker)
  • TreeView (Tree View)
  • 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.