Skip to content

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.

Placeholder example

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:

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.