React Custom Widgets
React Custom Widgets#
This page provides an overview of Squirro custom widgets created or modified using React.
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.
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.
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#
For an introduction to using Squirro Storybook, see Squirro Storybook.
See Available React Hooks for an overview of hooks available for use.
For further information on the libraries listed below, see Available Libraries.