Creating React Custom Widgets

Creating React Custom Widgets#

When creating a new widget, it’s helpful to understand the available Squirro variables, libraries, and collections.

Widget File Structure#

React custom widgets require two files:

  • main.js

  • config.js

Main.js

In this file you initialize your custom widget.

Note: If you’ve previously worked with Squirro Backbone.js custom widgets, you can understand this file as the React equivalent of widget.js.

Example Main.js

Config.js

In this file you define widget configuration options.

Adding Custom JavaScript Files#

Your custom JavaScript files are accessible via the Resources object in the global context.

For example, if you create a newComponent.js file that exports your new React component, you can use the following code to import the new React component:

Resources.resolved[`newComponent`]

Example Main.js newComponent

Customizing Widgets#

Once your main.js and config.js files are created, you can Customize Your Custom Widget.

Contents