# 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](https://reactjs.org/docs/react-api.html) page. The image below shows how to use the `useContext` hook from React: [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-usecontext.png) ## 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: [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-mui-button.png) For more information on MUI components, see the [Material UI Overview](https://mui.com/material-ui/getting-started/overview/) page. ### Squirro MUI Modifications Some modifications have been made to the MUI library which are documented under the **MUI Modifications** heading ([Learn more](storybook.md#react-storybook)). [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/mui-nav-storybook.png) 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](https://mui.com/x/introduction/) 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: [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-muix.png) 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](https://mui.com/x/react-date-pickers/getting-started/) 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](style.md#react-style). ## 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: [](https://s3.amazonaws.com/download.squirro.net/docs/technical/widgets/react-highcharts.png) 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](https://github.com/highcharts/highcharts-react). ## 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](https://momentjs.com/docs/). ## 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](https://underscorejs.org).