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.
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 on-premises. As for on-premises solutions version
1.1.0 is currently used.
To get started you have to install the following dependency to your project:
Enter the following command to install the dependency to your project:
npm install @pnp/spfx-controls-react --save --save-exact
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
The following controls are currently available:
- FileTypeIcon (Control that shows the icon of a specified file path or application)
- ListView (List view control)
- Placeholder (Control that can be used to show an initial placeholder if the web part has to be configured)
- SiteBreadcrumb (Breadcrumb control)
- TaxonomyPicker (Taxonomy Picker)
- PeoplePicker (People Picker)
- WebPartTitle (Customizable web part title control)
- IFrameDialog (renders a Dialog with an iframe as a content)
Field customizer controls:
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
countproperty 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)