Available Libraries

Available Libraries#

This page details the libraries used to create and modify React custom widgets. All listed libraries are already imported and available inside unique global variables. Name for each variable will be documented under corresponding library below.

React#

React is available under the global variable React.

You can access all top-level APIs, such as default hooks, components, functions, and utils documented on the official React Top-Level API page.

The image below shows how to use the useContext hook from React:

Example useContext hook

MUI#

Material UI (MUI) is a React component library capable of implementing Google’s Material Design.

Squirro uses MUI for some out-of-the-box widget development.

All Material UI components are available under the global variable MUI.

The image below shows how to use the Button component from MUI:

Example React MUI Button component

For more information on MUI components, see the Material UI Overview page.

Squirro MUI Modifications#

Some modifications have been made to the MUI library which are documented under the MUI Modifications heading in the Squirro Storybook sidebar navigation menu.

Screenshot showing location of MUI Modifications heading on the Squirro Storybook site

These modifications are usually done by adding new variants to the existing components. You can easily change variant props on a component to align with existing styling.

MUI X#

MUI X is an extension to the MUI library that offers more advanced components.

For more information on MUI X components, see the MUI X Overview page.

Date Picker

The MUI X Date Picker is available in Squirro custom widgets under the global variable MUIXDatePicker.

The image below shows how to use DatePicker from the MUI X library:

Example MUI X Date Picker component

Notice that the date packer must be wrapped inside LocalizationProvider with the dateAdapter value set to MUIXAdapterMoment as Squirro is using Moment.js to manage date manipulation.

For more information on MUI X date pickers, see the Date / Time pickers page.

Styled#

Styled is a MUI styling engine that is API-powered by the Emotion JavaScript library.

Squirro uses it for styling both custom and material UI components.

The Styled function is available under the global variable styled.

To learn more about using Styled with Squirro, see Styling React Components.

HighchartsReact#

HighchartsReact is an official React wrapper for the Highcharts.js library.

Creating and updating Highcharts data is much easier with components provided by the wrapper. All HighchartsReact functionalities are the same as in the original Highcharts library.

The HighchartsReact library is available under the global variable HighchartsReact.

The image below is an example how to use Highcharts library:

Example Highcharts screen shot

Note that you also need to pass highcharts prop that is also available in the global context as Highcharts.

To learn more about Highcarts, see the official documentation in the GitHub Highcharts-React Repository.

Moment#

MomentJS is a JavaScript library that helps to quickly parse, validate, manipulate, and display JavaScript date/time information.

The Moment library is available under the global variable moment.

Learn more about MomentJS on the MomentJS Documentation Site.

Underscore#

Underscore is a JavaScript library that provides functional programming helpers without extending any built-in objects.

Underscore provides 100+ functions that support common helpers such as map, filter, and invoke. It also provides more specialized helpers such as function binding and javascript templating.

The Underscore library is available under the global variable _.

Learn more about Underscore on the Official Underscore.js Site.

Contents