Send and Receive Values Between Two SPFx Web Parts

This article demonstrates how to send and receive values between two SPFx web parts using property binding in SharePoint Framework (SPFx).
This approach allows components to share data dynamically and stay in sync without requiring page reloads.

⚙️ Install Dependencies

Install the PnP JS library and other dependencies:

npm install @pnp/sp @microsoft/sp-property-pane --save

🧩 Create the Sender Web Part

The Sender Web Part allows users to input and send values to another web part on the same page.

import * as React from 'react';
import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

export interface ISenderWebPartProps {
  message: string;
}

export default class SenderWebPart extends BaseClientSideWebPart<ISenderWebPartProps> {
  private _message: string = '';

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <h3>SPFx Sender</h3>
        <input type="text" id="txtMessage" value="${escape(this.properties.message)}" placeholder="Enter your message" />
        <button id="btnSend">Send</button>
      </div>`;

    this.domElement.querySelector('#btnSend')?.addEventListener('click', () => {
      const input = (this.domElement.querySelector('#txtMessage') as HTMLInputElement)?.value;
      this.properties.message = input;
      this.context.dynamicDataSourceManager.notifyPropertyChanged('message');
    });
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: "Sender Web Part Configuration" },
          groups: [
            {
              groupFields: [
                PropertyPaneTextField('message', {
                  label: 'Message to send'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

📥 Create the Receiver Web Part

The Receiver Web Part listens for property changes from the Sender web part and updates automatically.

import * as React from 'react';
import { IDynamicDataCallables, DynamicProperty } from '@microsoft/sp-dynamic-data';
import { IPropertyPaneConfiguration, PropertyPaneDynamicFieldSet, PropertyPaneDynamicField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export interface IReceiverWebPartProps {
  source: DynamicProperty<string>;
}

export default class ReceiverWebPart extends BaseClientSideWebPart<IReceiverWebPartProps> implements IDynamicDataCallables {
  private _message: string = '';

  public render(): void {
    this.domElement.innerHTML = `
      <div>
        <h3>SPFx Receiver</h3>
        <p>Message from sender: ${this._message}</p>
      </div>`;
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: "Receiver Web Part Configuration" },
          groups: [
            {
              groupFields: [
                PropertyPaneDynamicFieldSet({
                  label: "Connect to Sender",
                  fields: [
                    PropertyPaneDynamicField('source', {
                      label: 'Message from Sender'
                    })
                  ],
                  sharedConfiguration: {
                    depth: 1
                  }
                })
              ]
            }
          ]
        }
      ]
    };
  }

  public getPropertyDefinitions() {
    return [{ id: 'message', title: 'Message' }];
  }

  public getPropertyValue(propertyId: string): string {
    switch (propertyId) {
      case 'message':
        return this._message;
    }
    return '';
  }
}

🚀 Build and Deploy the Solution

To build and deploy both web parts, run the following commands:

gulp build
gulp bundle --ship
gulp package-solution --ship

Then upload the generated .sppkg file to your App Catalog and deploy it.
Add both Sender and Receiver web parts to the same SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:Send and Receive Values Between Two SPFx Web Parts

GitHub

✅ Summary

This solution demonstrates inter-webpart communication using the Dynamic Data API in SPFx.
You can extend this further to synchronize multiple components, dashboards, or even user-driven configurations across the page.