How to use the @bentley/ui-framework.ConfigurableUiManager.registerControl function in @bentley/ui-framework

const boundingRect: DOMRect = (event.nativeEvent.target as any).getBoundingClientRect();
      ctx.clearRect(0, 0, boundingRect.width, boundingRect.height);
    }
  }

  private _onMouseDown = (event: React.MouseEvent) => {
    this.drawCanvas(event, true);
    event.preventDefault();
  }

  private _onMouseUp = (event: React.MouseEvent) => {
    this.drawCanvas(event, false);
  }
}

ConfigurableUiManager.registerControl(IModelViewportControl.id, IModelViewportControl);

<label>Can accept rows: </label>
        <input type="checkbox" id="receives_row"> {
          this.setState({ checked: event.target.checked });
        }} /&gt;
        <div style="{{">
          
          
        </div>
      
    );
  }
}

ConfigurableUiManager.registerControl("BreadcrumbDemoWidget", BreadcrumbDemoWidgetControl);

this._dataProvider.replaceProperty(args.propertyRecord, catIdx, newRecord);
      updated = true;
    }

    return updated;
  }

  public render() {
    return (
      
    );
  }
}

ConfigurableUiManager.registerControl("VerticalPropertyGridDemoWidget", VerticalPropertyGridWidgetControl);

export class HorizontalPropertyGridWidgetControl extends WidgetControl {
  private _ref = React.createRef();

  constructor(info: ConfigurableCreateInfo, options: any) {
    super(info, options);

    this.reactElement = (
      
        }
        ref={this._ref}
      />
    );

export class AppStatusBarWidgetControl extends StatusBarWidgetControl {
  constructor(info: ConfigurableCreateInfo, options: any) {
    super(info, options);
  }

  public getReactNode(_args: StatusBarWidgetControlArgs): React.ReactNode {
    const itemsManager = UiFramework.statusBarManager.getItemsManager("main");
    if (itemsManager)
      return (
        
      );
    return null;
  }
}

ConfigurableUiManager.registerControl("AppStatusBar", AppStatusBarWidgetControl);

if (this.props.iModelConnection && this.props.rulesetId) {
      return (
        <div style="{{">
          
          {this.renderContextMenu()}
        </div>
      );
    }
    return null;
  }
}

const createDataProviderFromProps = (props: UnifiedSelectionTableWidgetProps) =&gt;
  new PresentationTableDataProvider({ imodel: props.iModelConnection!, ruleset: props.rulesetId! });

ConfigurableUiManager.registerControl("UnifiedSelectionTableDemoWidget", UnifiedSelectionTableWidgetControl);

}

  public componentDidMount() {
    ViewportComponentEvents.onCubeRotationChangeEvent.addListener(this._handleCubeRotationChangeEvent);
  }

  public componentWillUnmount() {
    ViewportComponentEvents.onCubeRotationChangeEvent.removeListener(this._handleCubeRotationChangeEvent);
  }

  private _handleCubeRotationChangeEvent = (args: CubeRotationChangeEventArgs) => {
    this.setState({ rotMatrix: args.rotMatrix });
  }
}

ConfigurableUiManager.registerControl("CubeContent", CubeContentControl);

isPropertyHoverEnabled={true}
            onPropertyContextMenu={this._onPropertyContextMenu}
          />
          {this.renderContextMenu()}
        
      );

    return null;
  }
}

function createDataProvider(imodel: IModelConnection, rulesetId: string): PresentationPropertyDataProvider {
  return new PresentationPropertyDataProvider(imodel, rulesetId);
}

ConfigurableUiManager.registerControl("UnifiedSelectionPropertyGridDemoWidget", UnifiedSelectionPropertyGridWidgetControl);

);
  }
}

/*
   

     
     <div style="{vertDivStyle}"></div> 
     <div style="{vertDivStyle}"></div> 
*/

ConfigurableUiManager.registerControl("Tool1", Tool1UiProvider);

/** Process request to restart the tool. */
  public onRestartTool(): void {
    const tool = new AnalysisAnimationTool();
    if (!tool.run())
      this.exitTool();
  }

  /** Process selected viewport changes. */
  public onSelectedViewportChanged(_previous: Viewport | undefined, current: Viewport | undefined): void {
    if (undefined === current || undefined === current.view.analysisStyle)
      IModelApp.toolAdmin.startDefaultTool();
  }
}

ConfigurableUiManager.registerControl(AnalysisAnimationTool.toolId, AnalysisAnimationToolSettingsProvider);

this._dataProvider.replaceProperty(args.propertyRecord, catIdx, newRecord);
      updated = true;
    }

    return updated;
  }

  public render(): React.ReactNode {
    return (
      
    );
  }
}

ConfigurableUiManager.registerControl("HorizontalPropertyGridDemoContent", HorizontalPropertyGridContentControl);