React Plugin Setup

React Plugin Setup

Overview

This documentation provides an overview of setting up custom React components as plugins in an existing framework. The example demonstrates how to register various components, like toolbars and main containers, with different functionalities and styles.

Plugin Registration

The window.$_gooee.register method is used to register your custom components as plugins within the framework. The method takes the following parameters:

1. PluginName: The lowercase name of the plugin.
2. ComponentName: The name of your custom component.
3. Component: The actual React component.
4. TargetInjectionLocation: Specifies where in the UI the component will be injected.
5. ControllerName: The lowercase name of the controller associated with the component (without the 'Controller' suffix).

Example Components

ExampleTopLeftToolbar

• Purpose: A button on the top-left toolbar.

• Features: Plays an audio sound on hover.

• Usage:

  window.$_gooee.register("example", "ExampleTopLeftToolbar", ExampleTopLeftToolbar, "top-left-toolbar");

ExampleTopRightToolbar

• Purpose: A button on the top-right toolbar.

• Features: Plays an audio sound on hover.

• Usage:

  window.$_gooee.register("example", "ExampleTopRightToolbar", ExampleTopRightToolbar, "top-right-toolbar");

ExampleBottomRightToolbar

• Purpose: A button on the bottom-right toolbar with tooltip.

• Features: Toggles visibility, plays different sounds based on action, displays tooltip on hover.

• Usage:

  window.$_gooee.register("example", "ExampleBottomRightToolbar", ExampleBottomRightToolbar, "bottom-right-toolbar", "example");

ExampleBottomLeftToolbar

• Purpose: A button on the bottom-left toolbar with tooltip.

• Features: Displays tooltip on hover.

• Usage:

  window.$_gooee.register("example", "ExampleBottomLeftToolbar", ExampleBottomLeftToolbar, "bottom-left-toolbar");

ExampleMainContainer

• Purpose: A main container component with various interactive elements.

• Features: Displays different UI elements like buttons, sliders, and tabs based on visibility state.

• Usage:

  window.$_gooee.register("example", "ExampleMainContainer", ExampleMainContainer, "main-container", "example");

Implementation Notes

• Ensure that all the components you register are properly defined and exported in your React project.
• The styles and classes used in these components should be defined in your CSS files.
• The engine.trigger method is used for playing audio sounds on certain interactions.
• The setupController function is used in components that interact with the application's state.

Best Practices

• Use descriptive names for your components and plugins to easily identify their purpose.
• Keep your components modular and reusable.
• Test your components in different parts of the application to ensure they work as expected in various contexts.