--- title: Activate 3rd Party Packages - Frontend slug: activate-3rd-party-packages-frontend createdAt: 2025-07-17T01:19:26.627Z --- ## 1. Activate Front End React App - Dependencies These are dependencies used during the development process and are included in the final build of the application. ### @azure/msal-browser **Version:** ^2.38.3 **Description:** The Microsoft Authentication Library (MSAL) for JavaScript enables client-side JavaScript applications to authenticate users using Azure AD work and school accounts, Microsoft personal accounts, and social identity providers through Azure AD B2C service. It also allows your app to get tokens to access Microsoft Cloud services such as Microsoft Graph. **Link:** npm @azure/msal-browser Usage in our software: ### @azure/msal-react **Version:** ^1.5.12 **Description:** This package provides a wrapper around the MSAL.js library for React applications, enabling authentication in JavaScript Single-Page Applications without backend servers. It uses the OAuth 2.0 Authorization Code Flow with PKCE. **Link:** npm @azure/msal-react Usage in our software: ### @codemirror/lang-xml **Version:** ^0.19.2 **Description:** This package implements XML language support for the CodeMirror code editor, including schema-based autocompletion and other XML-specific features. **Link:** npm @codemirror/lang-xml Usage in our software: ### @date-io/date-fns **Version:** ^1.3.13 **Description:** This package is an abstraction over the date-fns library, providing a unified interface for date management in JavaScript. **Link:** npm @date-io/date-fns Usage in our software: ### @emotion/react **Version:** ^11.11.1 **Description:** Emotion is a library designed for writing CSS styles with JavaScript. This package provides simple styling in React applications. **Link:** npm @emotion/react Usage in our software: ### @emotion/styled **Version:** ^11.11.0 **Description:** This package provides the styled API for Emotion, allowing you to create styled React components with ease. **Link:** npm @emotion/styled Usage in our software: ### @fontsource/roboto **Version:** ^4.5.8 **Description:** This package provides the CSS and web font files to easily self-host the "Roboto" font. **Link:** npm @fontsource/roboto Usage in our software: ### @iconify/json **Version:** ^2.2.161 **Description:** This package contains a collection of open source vector icons in JSON format, validated and cleaned up for easy use. **Link:** npm @iconify/json Usage in our software: ### @lexical/react **Version:** ^0.5.0 **Description:** This package provides a set of components and hooks for Lexical, allowing for text editing in React applications. **Link:** npm @lexical/react Usage in our software: ### @lexical/utils **Version:** ^0.5.0 **Description:** This package contains miscellaneous utilities for Lexical. **Link:** npm @lexical/utils Usage in our software: ### @mui/icons-material **Version:** ^5.15.15 **Description:** This package contains Google's Material Icons converted to Material UI SVG Icon components, allowing easy integration of Material Icons in React applications. **Link:** npm @mui/icons-material Usage in our software: ### @mui/lab **Version:** ^5.0.0-alpha.170 **Description:** This package hosts the incubator components that are not yet ready to move to the core of Material UI. It includes experimental and advanced components. **Link:** npm @mui/lab Usage in our software: ### @mui/material **Version:** ^5.15.15 **Description:** Material UI is an open-source React component library that implements Google's Material Design. It provides a comprehensive set of UI components for building responsive web applications. **Link:** npm @mui/material Usage in our software: ### @mui/styles **Version:** ^5.15.15 **Description:** This package provides the legacy JSS-based styling solution for Material UI. It allows for the creation of custom styles and themes. **Link:** npm @mui/styles Usage in our software: ### @mui/x-tree-view **Version:** ^6.17.0 **Description:** This package is part of MUI X and provides Tree View components for displaying hierarchical data in a tree structure. It includes both simple and rich versions of the Tree View component. **Link:** npm @mui/x-tree-view Usage in our software: ### @react-querybuilder/material **Version:** ^6.5.4 **Description:** This package provides Material UI components for the react-querybuilder library, enabling the creation of query builders with a Material Design look and feel. **Link:** npm @react-querybuilder/material Usage in our software: ### @rpldy/chunked-uploady **Version:** ^0.13.6 **Description:** This package is a wrapper for React-Uploady that provides support for chunked file uploads. It breaks down large files into smaller chunks for more efficient uploading. **Link:** npm @rpldy/chunked-uploady Usage in our software: ### @rpldy/upload-button **Version:** ^0.13.6 **Description:** This package provides a simple upload button component for React-Uploady, allowing users to select files for upload via a button click. **Link:** npm @rpldy/upload-button Usage in our software: ### @types/react **Version:** ^18.3.1 **Description:** This package contains TypeScript type definitions for React, enabling type checking and IntelliSense for React projects. **Link:** npm @types/react Usage in our software: ### @types/react-dom **Version:** ^18.3.0 **Description:** This package contains TypeScript type definitions for React DOM, providing type checking and IntelliSense for React DOM operations. **Link:** npm @types/react-dom Usage in our software: ### @types/xmldoc **Version:** ^1.1.9 **Description:** This package provides TypeScript type definitions for the xmldoc library, which is used for parsing XML documents in JavaScript. **Link:** npm @types/xmldoc Usage in our software: ### @uiw/react-codemirror **Version:** 3.2.10 **Description:** This package provides a CodeMirror component for React, allowing for the integration of the CodeMirror code editor in React applications. **Link:** npm @uiw/react-codemirror Usage in our software: ### classnames **Version:** ^2.3.2 **Description:** A simple JavaScript utility for conditionally joining class names together. It is often used in React applications to dynamically set class names based on component state. **Link:** npm classnames Usage in our software: ### crypto **Version:** ^1.0.1 **Description:** This package provides cryptographic functionality that includes a set of wrappers for OpenSSL's hash, HMAC, cipher, decipher, sign, and verify functions. **Link:** npm crypto Usage in our software: ### date-fns **Version:** 2.30.0 **Description:** A modern JavaScript date utility library that provides comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. **Link:** npm date-fns Usage in our software: ### export-to-csv **Version:** 0.2.1 **Description:** A small, simple library for generating CSV files from JavaScript objects. It is lightweight and has zero dependencies. **Link:** npm export-to-csv Usage in our software: ### jspdf **Version:** ^2.5.1 **Description:** A library to generate PDFs in JavaScript. It can be used to create PDF documents directly in the browser or in Node.js. **Link:** npm jspdf Usage in our software: ### jspdf-autotable **Version:** ^3.8.1 **Description:** A plugin for jsPDF that allows you to generate PDF tables either by parsing HTML tables or by using JavaScript data directly. **Link:** npm jspdf-autotable Usage in our software: ### lexical **Version:** ^0.5.0 **Description:** An extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance. It allows developers to create unique text editing experiences. **Link:** npm lexical Usage in our software: ### mirrorsharp **Version:** ^2.1.0 **Description:** A reusable client-server code editor component built on Roslyn and CodeMirror. It provides features like code completion, signature help, quick fixes, diagnostics, and quick info. **Link:** npm mirrorsharp Usage in our software: ### notistack **Version:** ^2.0.8 **Description:** Notistack is an extension to Material-UI Snackbar that makes it extremely easy to display notifications. It allows you to stack snackbars on top of one another and is highly customizable. **Link:** npm notistack Usage in our software: ### qrcode.react **Version:** ^1.0.1 **Description:** A React component to generate QR codes for rendering to the DOM. It supports rendering as SVG or Canvas. **Link:** npm qrcode.react Usage in our software: ### react **Version:** 18.3.1 **Description:** React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components. **Link:** npm react Usage in our software: ### react-async **Version:** ^10.0.1 **Description:** React component and hook for declarative promise resolution and data fetching. It makes it easy to handle every state of the asynchronous process. **Link:** npm react-async Usage in our software: ### react-codemirror **Version:** ^1.0.0 **Description:** A CodeMirror component for React, allowing for the integration of the CodeMirror code editor in React applications. **Link:** npm react-codemirror Usage in our software: ### react-conditionally-render **Version:** ^1.0.2 **Description:** A component that aims to simplify conditional rendering in React by creating a readable interface. **Link:** npm react-conditionally-render Usage in our software: ### react-datepicker **Version:** ^4.25.0 **Description:** A simple and reusable datepicker component for React. It supports various configurations and customizations. **Link:** npm react-datepicker Usage in our software: ### react-dnd **Version:** ^14.0.5 **Description:** A set of React utilities to help you build complex drag-and-drop interfaces while keeping your components decoupled. **Link:** npm react-dnd Usage in our software: ### react-dnd-html5-backend **Version:** ^14.1.0 **Description:** The officially supported HTML5 backend for React DnD, providing the drag-and-drop functionality. **Link:** npm react-dnd-html5-backend Usage in our software: ### react-dom **Version:** 18.3.1 **Description:** This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package. **Link:** npm react-dom Usage in our software: ### react-draggable **Version:** ^4.4.6 **Description:** A simple component for making elements draggable. It wraps an existing element and extends it with new event handlers and styles, allowing for easy drag-and-drop functionality. **Link:** npm react-draggable Usage in our software: ### react-easy-crop **Version:** ^3.5.3 **Description:** A React component to crop images and videos with easy interactions. It supports drag, zoom, and rotate interactions, making it ideal for image manipulation tasks. **Link:** npm react-easy-crop Usage in our software: ### react-error-boundary **Version:** ^3.1.4 **Description:** A reusable React error boundary component that helps catch JavaScript errors anywhere in the component tree, log those errors, and display a fallback UI. **Link:** npm react-error-boundary Usage in our software: ### react-frame-component **Version:** ^5.2.6 **Description:** This component allows you to encapsulate your entire React application or individual components in an iFrame, providing isolation and encapsulation. **Link:** npm react-frame-component Usage in our software: ### react-froala-wysiwyg **Version:** ^4.1.4 **Description:** Provides React bindings to the Froala WYSIWYG editor, enabling rich text editing capabilities within React applications. **Link:** npm react-froala-wysiwyg Usage in our software: ### react-hook-form **Version:** ^7.51.3 **Description:** A performant, flexible, and extensible forms library for React Hooks, designed to simplify form validation and management. **Link:** npm react-hook-form Usage in our software: ### react-inlinesvg **Version:** ^2.3.0 **Description:** An SVG loader for React that allows you to load inline, local, or remote SVGs in your React components. **Link:** npm react-inlinesvg Usage in our software: ### react-input-trigger **Version:** 2.0.0-beta-7 **Description:** A React component for handling character triggers inside textareas and input fields, useful for building applications with features like emoji suggestions or user mentions. **Link:** npm react-input-trigger Usage in our software: ### react-jss **Version:** ^10.10.0 **Description:** JSS integration with React, providing a way to style React components using JavaScript. **Link:** npm react-jss Usage in our software: ### react-material-ui-carousel **Version:** ^3.4.2 **Description:** A generic, extendible carousel UI component for React using Material UI, providing smooth animations and interactive bullet indicators. **Link:** npm react-material-ui-carousel Usage in our software: ### react-querybuilder **Version:** ^6.5.4 **Description:** A fully customizable query builder component for React, along with a collection of utility functions for importing from, and exporting to, various query languages like SQL, MongoDB, and more. **Link:** npm react-querybuilder Usage in our software: ### react-resize-detector **Version:** ^7.1.2 **Description:** A lightweight library that utilizes ResizeObservers to handle element resizes in React applications without relying on window resize listeners. **Link:** npm react-resize-detector Usage in our software: ### react-router-dom **Version:** ^5.3.4 **Description:** Provides bindings for using React Router in web applications, enabling declarative routing for React web applications. **Link:** npm react-router-dom Usage in our software: ### react-router-last-location **Version:** ^2.0.1 **Description:** Provides access to the last location in React + React Router applications, useful for handling internal routing and preventing users from leaving the app. **Link:** npm react-router-last-location Usage in our software: ### react-scripts **Version:** 5.0.1 **Description:** Includes scripts and configuration used by Create React App, simplifying the setup and development of React applications. **Link:** npm react-scripts Usage in our software: ### react-table **Version:** ^7.8.0 **Description:** Hooks for building lightweight, fast, and extendable datagrids for React, offering features like sorting, filtering, and pagination. **Link:** npm react-table Usage in our software: ### react-to-print **Version:** ^2.14.15 **Description:** Allows you to print React components in the browser by popping up a print window with CSS styles copied over. **Link:** npm react-to-print Usage in our software: ### react-transition-group **Version:** ^4.4.5 **Description:** A set of components for managing component states (including mounting and unmounting) over time, specifically designed with animation in mind. **Link:** npm react-transition-group Usage in our software: ### recharts **Version:** ^2.10.3 **Description:** A composable charting library built on React components and D3, designed to make it easy to create charts in React applications. **Link:** npm recharts Usage in our software: ### remove **Version:** ^0.1.5 **Description:** A simple utility for removing files and directories. **Link:** npm remove Usage in our software: ### rimraf **Version:** ^3.0.2 **Description:** A Node.js module that provides a cross-platform implementation of the UNIX command \`rm -rf\`, allowing for deep recursive deletion of files and directories. **Link:** npm rimraf Usage in our software: ### source-map-explorer **Version:** ^2.5.2 **Description:** A tool to analyze and debug JavaScript (or Sass or LESS) code bloat through source maps. It shows a treemap visualization to help you understand where the code in your minified bundle is coming from. **Link:** npm source-map-explorer Usage in our software: ### textarea-caret **Version:** ^3.1.0 **Description:** A utility to get the top and left coordinates of the caret in a \`textarea\` or \`input type="text"\`, useful for implementing autocompletes and other text input features. **Link:** npm textarea-caret Usage in our software: ### throttle-debounce **Version:** ^3.0.1 **Description:** Provides throttle and debounce functions to control the rate at which a function is executed, useful for optimizing performance in event handling. **Link:** npm throttle-debounce Usage in our software: ### tributejs **Version:** ^5.1.3 **Description:** A cross-browser @mention engine written in ES6 with no dependencies, supporting various frameworks and WYSIWYG editors. **Link:** npm tributejs Usage in our software: ### merge **Version:** ^1.2.1 **Description:** A utility for merging multiple objects into one, supporting both shallow and deep merging. **Link:** npm merge Usage in our software: ### oidc-client **Version:** ^1.9.0 **Description:** A library to provide OpenID Connect (OIDC) and OAuth2 protocol support for client-side, browser-based JavaScript applications, including user session and access token management. **Link:** npm oidc-client Usage in our software: ## 2. Activate Front End React App - Dev Dependencies These are development dependencies used during the development process and are not included in the final build of the application. ### @iconify/react **Version:** ^3.2.2 **Description:** Iconify for React provides a component to use over 200,000 icons from 150+ icon sets. It loads icons on demand from the Iconify API. **Link:** npm @iconify/react Usage in our software: ### @playwright/test **Version:** ^1.43.1 **Description:** Playwright Test is a framework for end-to-end testing of web applications, supporting multiple browsers and providing features like auto-wait, tracing, and web-first assertions. **Link:** npm @playwright/test Usage in our software: ### @types/node **Version:** ^20.12.7 **Description:** This package contains TypeScript type definitions for Node.js, enabling type checking and IntelliSense for Node.js APIs. **Link:** npm @types/node Usage in our software: ### assert **Version:** ^2.1.0 **Description:** The assert module from Node.js, for the browser. It provides a set of assertion functions for verifying invariants. **Link:** npm assert Usage in our software: ### buffer **Version:** ^6.0.3 **Description:** The buffer module from Node.js, for the browser. It provides an API identical to Node.js Buffer API for handling binary data. **Link:** npm buffer Usage in our software: ### cross-env **Version:** ^7.0.3 **Description:** Allows setting environment variables across platforms, making it easier to run scripts that set and use environment variables in a cross-platform way. **Link:** npm cross-env Usage in our software: ### crypto-browserify **Version:** ^3.12.0 **Description:** A port of Node.js' crypto module to the browser, providing cryptographic operations like hashing, HMAC, encryption, and decryption. **Link:** npm crypto-browserify Usage in our software: ### eslint-config-react-app **Version:** ^7.0.1 **Description:** This package includes the shareable ESLint configuration used by Create React App, providing linting rules and settings for React projects. **Link:** npm eslint-config-react-app Usage in our software: ### eslint-import-resolver-typescript **Version:** ^3.6.1 **Description:** Adds TypeScript support to eslint-plugin-import, allowing ESLint to resolve import paths for TypeScript files according to the TypeScript compiler options. **Link:** npm eslint-import-resolver-typescript Usage in our software: ### eslint-plugin-flowtype **Version:** ^8.0.3 **Description:** Provides Flow type linting rules for ESLint, helping enforce Flow type good practices in your codebase. **Link:** npm eslint-plugin-flowtype Usage in our software: ### eslint-plugin-import **Version:** ^2.29.1 **Description:** This plugin supports linting of ES6+ (ES2015+) import/export syntax, and prevents issues with misspelling of file paths and import names. **Link:** npm eslint-plugin-import Usage in our software: ### eslint-plugin-jsx-a11y **Version:** ^6.8.0 **Description:** Static AST checker for accessibility rules on JSX elements, helping to enforce accessibility best practices in your React applications. **Link:** npm eslint-plugin-jsx-a11y Usage in our software: ### eslint-plugin-react **Version:** ^7.33.2 **Description:** Provides linting rules for React, helping to enforce best practices and catch common errors in React code. **Link:** npm eslint-plugin-react Usage in our software: ### grunt **Version:** ^1.6.1 **Description:** A JavaScript task runner that can automate repetitive tasks like minification, compilation, unit testing, and linting. **Link:** npm grunt Usage in our software: ### grunt-svgstore **Version:** ^2.0.0 **Description:** A Grunt plugin to create an SVG sprite from a collection of SVG files, optimizing and combining them into a single file. **Link:** npm grunt-svgstore Usage in our software: ### https-browserify **Version:** ^1.0.0 **Description:** A port of Node.js' https module to the browser, allowing for HTTPS requests in browser environments. **Link:** npm https-browserify Usage in our software: ### os-browserify **Version:** ^0.3.0 **Description:** A port of Node.js' os module to the browser, providing basic operating system-related utility functions. **Link:** npm os-browserify Usage in our software: ### process **Version:** ^0.11.10 **Description:** A port of Node.js' process module to the browser, providing process-related utility functions. **Link:** npm process Usage in our software: ### react-app-rewired **Version:** ^2.2.1 **Description:** Allows customizing Create React App configuration without ejecting, making it easier to modify webpack configurations and other settings. **Link:** npm react-app-rewired Usage in our software: ### stream-browserify **Version:** ^3.0.0 **Description:** A port of Node.js' stream module to the browser, providing a way to handle streaming data in browser environments. **Link:** npm stream-browserify Usage in our software: ### stream-http **Version:** ^3.2.0 **Description:** An implementation of Node's native http module for the browser, providing HTTP client functionality with streaming support. **Link:** npm stream-http Usage in our software: ### typescript **Version:** ^4.3.4 **Description:** A language for application-scale JavaScript development, adding optional static types to JavaScript to improve developer productivity and code quality. **Link:** npm typescript Usage in our software: ### url **Version:** ^0.11.3 **Description:** Node.js URL module for parsing and resolving URLs, providing utilities for URL resolution and parsing. **Link:** npm url Usage in our software: ### valuelink **Version:** ^2.0.9 **Description:** Provides two-way data binding and form validation for React, simplifying state management and form handling. **Link:** npm valuelink Usage in our software: ### @babel/plugin-proposal-private-property-in-object **Version:** ^7.21.11 **Description:** This plugin transforms checks for a private property in an object. Note: This package has been deprecated in favor of @babel/plugin-transform-private-property-in-object. **Link:** npm @babel/plugin-proposal-private-property-in-object Usage in our software: ### ajv **Version:** ^6.9.1 **Description:** The fastest JSON schema validator for Node.js and browser, supporting JSON Schema drafts and JSON Type Definition. **Link:** npm ajv Usage in our software: ### nan **Version:** ^2.14.1 **Description:** Native Abstractions for Node.js (NAN) provides a set of macros and utilities to simplify the development of Node.js native addons across different Node.js versions. **Link:** npm nan Usage in our software: ### typescript **Version:** ^4.3.2 **Description:** A language for application-scale JavaScript development, adding optional static types to JavaScript to improve developer productivity and code quality. **Link:** npm typescript Usage in our software: