React Custom Widgets#

This page provides an overview of Squirro custom widgets created or modified using React.

Note

Squirro began migrating from Backbone.js custom widgets to React custom widgets in Q3 2021. As of version 3.5.8 LTS (July 2022), project creators can opt into using React widgets.

Prerequisites#

To work with React custom widgets, you’ll need a basic familiarity with the React JavaScript library.

For an introduction to relevant React concepts and third-party documentation, see Getting Started with React.

Functional and Component-Based React#

Squirro React widgets are functional and component-based, as opposed to object-oriented and class-based.

The benefit of this approach is that you can get all the information you need from documentation rather than having to check code on the Squirro GitHub repository.

It also means that React custom widgets are more resilient to change because you only need to override the individual parts of the widget requiring change.

Important: You can’t override methods and views that aren’t directly exposed via the Squirro Widget API.

Opting In#

As of version 3.5.8 LTS, project creators can opt into using React for custom widgets (as opposed to Backbone.js).

See the Configuration service wiki page for information on using the frontend.userapp.use-react-widgets option.

For a step-by-step guide to opting in, see How To Opt In To React Widgets.

Creating and Customizing React Custom Widgets#

There are two ways to create custom widgets. You can

  • create widgets from a template, or

  • customize out-of-the-box widgets.

To learn more about creating React custom widgets from a base template, see Creating React Custom Widgets.

To learn more about customizing out-of-the-box React custom widgets, see Customizing React Custom Widgets.

Styling React Components#

Styling React Components describes custom widget styling using CSS in JavaScript with an Emotion library.

Squirro Storybook#

For an introduction to using Squirro Storybook, see Squirro Storybook.

React Hooks#

See Available React Hooks for an overview of hooks available for use.

Available Libraries#

For further information on the libraries listed below, see Available Libraries.

  • React

  • MUI

  • HighchartsReact

  • Moment