React Framework - AJIXuMuK/generator-spfx-proppane-control GitHub Wiki

React Framework option allows to create a property pane control using React framework.

New control is added to /src/propertyFields/<componentName> folder. Next files are added to the folder:

  • IPropertyField<ComponentName>.ts - contains interfaces for the properties used in the control. Add you custom properties here.
  • PropertyField<ComponentName>.ts- contains entry point class with render method and helper function to add the control to the property pane. Use this file to call rendering of your React component.
  • PropertyField<ComponentName>.module.scss - Sass file with control's styles.
  • IPropertyField<ComponentName>Host.ts - contains props and state interfaces for the React component
  • PropertyField<ComponentName>Host.tsx - contains implementations of the React component. Use this file to add custom component's logic.

Additionally, the generator with "React" options selected checks if needed react dependencies are installed and installs them if not.