Creating an inline web part title in SharePoint Framework

SharePoint modern pages do not have the same web part chrome that classic pages provide. Therefore, the developer of a custom SPFX web part must provide their own web part title rather than rely on SharePoint to provide it for them. Creating a web part title that mimics the Microsoft Highlighted content web part will enable users to easily set their web part titles without having to open the property pane, while driving a more consistent UX for end users.
(The implementation shown below starts from the react framework template generated by the SharePoint yeoman template.)

First, we must create a title property in the web part properties file (located in the root of the current web part folder). This file represents the properties that will be saved for this web part. For this example, we will simply have the title property.

export interface IInlineHeaderExampleWebPartProps {
  title: string;
}

Next, we set the component properties file (located in the components folder of the current web part). This file will have two (2) more properties than the web part properties file: 1) a boolean value to determine if the web part is in edit mode (used to determine whether the title area is currently editable) and 2) a function that will allow us to set the title of the web part in the stored properties.

export interface IInlineHeaderExampleProps {
  title: string;
  isEditMode: boolean;
  setTitle: Function;
}

Once the property files are set up, we can set up the render function on the web part file (located in the root of the current web part folder). This function will not only pass the title value to the web part's react element, but will pass a boolean to indicate whether the web part is in edit mode and a function to allow the title property to be set from the react element.

public render(): void {
    const props = this.properties;
    const element: React.ReactElement<IInlineHeaderExampleProps > = React.createElement(
      InlineHeaderExample,
      {
        title: this.properties.title,
        isEditMode: this.displayMode==DisplayMode.Edit,
        setTitle: function(title:string){
          props.title=title;
        }
      }
    );
    ReactDom.render(element, this.domElement);
  }

Now we can tackle the actual display of the title within the web part that is displayed on the page. A setTitle function is needed in the React.Component in the web part .tsx file (located in the components folder of the current web part). This function passes the web part title entered in the edit-mode textarea to the BaseClientSideWebPart to save in the web part properties.

export default class InlineHeaderExample extends React.Component<IInlineHeaderExampleProps, void> {

  public setTitle(event){
    this.props.setTitle(event.target.value);
  }

  public render(): React.ReactElement<IInlineHeaderExampleProps> {
    return (
      <div>
        <div className={styles["webpart-header"]}>
          { this.props.isEditMode && <textarea onChange={this.setTitle.bind(this)} className={styles["edit"]} placeholder={strings.TitlePlaceholder} aria-label="Add a title" defaultValue={this.props.title}></textarea> }
          { !this.props.isEditMode && <span className={styles["view"]}>{this.props.title}</span> }          
        </div>
      </div>
    );
  }
}

Finally, the scss styles that can be used to make the title area look similar to the Highlighted content web part.

.webpart-header {
    font-size: 24px;
    font-weight:100;
    margin-bottom:20px;
    & .edit {
        background-color: transparent;
        border: none;
        box-sizing: border-box;
        display: block;
        margin: 0;
        outline: 0;
        overflow: hidden;
        resize: none;
        white-space: pre;
        width: 100%;
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        text-align: inherit;
        color: #333333;
        height: 40px;
    }

    & .view {
        color: #333333;
    }
}

Adding an inline web part title experience will enable you maintain a consistent experience in your custom web parts as Microsoft is using in their web parts.

Please find the code shown in this post here.