# React Custom Widgets This page provides an overview of Squirro custom widgets created or modified using React. ## 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](start.md#react-start). ## 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 See the [Configuration service](../../admin/configuration/config-service.md#admin-config-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](how-to-guides/how-opt.md#how-opt). ## 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](create.md#react-create). To learn more about customizing out-of-the-box React custom widgets, see [Customizing React Custom Widgets](customize.md#react-customize). ## Styling React Components [Styling React Components](style.md#react-style) describes custom widget styling using CSS in JavaScript with an Emotion library. ## Squirro Storybook For an introduction to using Squirro Storybook, see [Squirro Storybook](storybook.md#react-storybook). ## React Hooks See [Available React Hooks](hooks.md#react-hooks) for an overview of hooks available for use. ## Available Libraries For further information on the libraries listed below, see [Available Libraries](libraries.md#react-libraries). - React - MUI - HighchartsReact - Moment