Skip to content

WebPartTitle control

This control renders a web part title that is changeable when the page is in edit mode.

Here is an example of the control in action:

WebPartTitle control

How to use this control in your solutions

  • Check that you installed the @pnp/spfx-controls-react dependency. Check out the getting started page for more information about installing the dependency.
  • In the root web part file, the one that extends from the BaseClientSideWebPart class. Pass the following properties to your web part main component:
const element: React.ReactElement<IControlsTestProps> = React.createElement(
  ControlsTest,
  {
    title: this.properties.title,
    displayMode: this.displayMode,
    updateProperty: (value: string) => {
      this.properties.title = value;
    }
  }
);
  • Add the title, displayMode, and updateProperty properties to the properties interface of your component:
import { DisplayMode } from '@microsoft/sp-core-library';

export interface IControlsTestProps {
  title: string;
  displayMode: DisplayMode;
  updateProperty: (value: string) => void;
}
  • In your component file, import the WebPartTitle control as follows:
import { WebPartTitle } from "@pnp/spfx-controls-react/lib/WebPartTitle";
  • Use the WebPartTitle control in your code as follows:
<WebPartTitle displayMode={this.props.displayMode}
              title={this.props.title}
              updateProperty={this.props.updateProperty} />

Implementation

The WebPartTitle control can be configured with the following properties:

Property Type Required Description
displayMode DisplayMode yes This tells the control in which page mode it is rendering.
title string yes The title value for the web part.
updateProperty Function yes Function that you can pass to update the title in the root web part.
className string no Optional property to specify a custom class that allows you to change the web part title style.