10 KiB
10 KiB
React Package Catalog
Purpose-based starting register for evaluating dependencies in React applications. This is not a mandatory stack, security certification, compatibility guarantee, or approval to install packages. Use the package selection skill and inspect the active application's requirements and dependency versions before making a choice.
Status and evidence
Verified means reported as deployed in a working application. The packages in the verified tables below were supplied by the user as a working deployed stack on 2026-10-08; that provenance is recorded here and has not been independently mapped to a specific repository, release, lockfile, or runtime. For tooling marked Verified (toolchain), the package supports building, linting, or testing that application but is not shipped to end users. Neither label asserts that every package is appropriate for a different application or that a specific version remains current.
“Candidate” means an optional package to evaluate only if the described need exists. Candidate entries below were checked against the linked primary project documentation on 2026-10-08. This is a purpose check, not a full version, security, license, or maintenance audit. Recheck current evidence before adoption.
Runtime application packages
| Purpose | Package(s) | Status and scope |
|---|---|---|
| UI rendering | react, react-dom (React 19) |
Verified — deployed application stack; React component model and browser DOM renderer. |
| Client-side routing | react-router-dom (v6) |
Verified — deployed application stack; URL-driven client navigation. |
| Server data state | @tanstack/react-query |
Verified — deployed application stack; fetching, caching, synchronization, and mutations for server state. |
| HTTP transport | axios |
Verified — deployed application stack; used behind the shared authClient. Keep authentication policy and token handling in the shared client rather than duplicating it across call sites. |
| Client/global state | zustand |
Verified — deployed application stack; lightweight client-side stores. Keep server-owned cached data in its server-state layer unless a concrete need justifies duplication. |
| Realtime notifications | @microsoft/signalr |
Verified — deployed application stack; SignalR client for in-app push notifications. |
| Entra ID authentication | @azure/msal-browser |
Verified — deployed application stack; browser sign-in and token acquisition. Treat configuration, scopes, storage, and token flow as security-sensitive. |
| Form state and submission | react-hook-form |
Verified — deployed application stack; form state and submission handling. |
| Runtime schemas and inferred types | zod |
Verified — deployed application stack; schema validation and TypeScript inference. |
| Form/schema integration | @hookform/resolvers |
Verified — deployed application stack; resolver bridge between React Hook Form and Zod. |
| Searchable/multi-select controls | react-select |
Verified — deployed application stack; searchable and multi-select dropdowns. |
| Numeric/currency inputs | react-number-format |
Verified — deployed application stack; formatting numeric entry. Verify locale, precision, and parsing behavior for each domain. |
| Colour selection | react-color |
Verified — deployed application stack; colour-picker UI. |
| Component library | react-bootstrap |
Verified — deployed application stack; Bootstrap-based React components. |
| Styling framework and alias isolation | bootstrap5 alias for bootstrap@5 |
Verified — deployed application stack; Bootstrap 5 SCSS kept separate from Vue's Bootstrap 4. Preserve the package-manager alias and CSS scoping boundary. |
| Icons | @fortawesome/react-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/free-solid-svg-icons, @fortawesome/free-regular-svg-icons |
Verified — deployed application stack; React bindings, SVG core, and the listed icon sets. |
| Toast notifications | react-toastify |
Verified — deployed application stack; transient notification UI. |
| Resizable layout panes | react-resizable-panels |
Verified — deployed application stack; resizable split-pane layouts. |
| Conditional class names | clsx |
Verified — deployed application stack; conditional CSS class composition. |
| Data tables | @tanstack/react-table |
Verified — deployed application stack; headless sorting, expansion, and pagination. Supply accessible table markup and UI behavior in the application. |
| Drag and drop | @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/react |
Verified — deployed application stack; drag interactions and sortable lists. Keep these as separate package identities when checking compatibility. |
| Node-edge diagrams | @xyflow/react |
Verified — deployed application stack; interactive entity-model and data-lineage graphs. |
| Graph layout | elkjs |
Verified — deployed application stack; automatic layout for React Flow diagrams. |
| In-app diagrams | mermaid |
Verified — deployed application stack; Mermaid diagrams in AI chat. |
| Code/formula/SQL editor | react-ace, ace-builds |
Verified — deployed application stack; embedded editors for code, formulas, and SQL. |
| Markdown and GFM rendering | react-markdown, remark-gfm |
Verified — deployed application stack; Markdown and GitHub Flavored Markdown rendering for AI chat. Apply an explicit policy for raw HTML and unsafe links. |
| Browser JSX compilation | sucrase |
Verified — deployed application stack; compiles AI-generated JSX in the browser for live dashboards. Treat execution of generated code as a security boundary; compilation alone is not sandboxing. |
| HTML sanitization | dompurify |
Verified — deployed application stack; sanitizes generated HTML before rendering. Keep sanitization at the final HTML trust boundary and configure allowed markup deliberately. |
| Client-side identifiers | uuid |
Verified — deployed application stack; client-side ID generation. |
| Date and time | moment |
Verified — deployed application stack; imported once. Treat as an established dependency, not a default for new code; assess native Intl/Temporal availability or alternatives against required parsing, timezone, and formatting behavior before migrating. |
Build, lint, and test packages
| Purpose | Package(s) | Status and scope |
|---|---|---|
| Development server and bundler | vite, @vitejs/plugin-react |
Verified (toolchain) — used to develop and build the deployed application; not runtime packages shipped to users. |
| Type checking | typescript |
Verified (toolchain) — used in the deployed application's build/check workflow; compile-time checks do not validate untrusted runtime data. |
| TypeScript linting | typescript-eslint (as named in the supplied list) |
Verified (toolchain) — reported as part of the deployed application's lint toolchain. Confirm the actual installed packages/configuration (commonly typescript-eslint and/or @typescript-eslint/parser plus @typescript-eslint/eslint-plugin) in the manifest and lockfile before editing. It provides ESLint support for TypeScript rather than replacing TypeScript's type checker. |
| Unit/component tests and DOM environment | vitest, @testing-library/*, jsdom |
Verified (toolchain) — reported as the deployed application's test stack; dev/test dependencies, not runtime-shipped packages. The Testing Library family can include packages with different roles; inspect the manifest to identify the exact installed set. |
Optional candidates to evaluate
These are additions to consider when the corresponding need exists. They are not reported as deployed or selected for a particular repository.
| Purpose | Candidate package(s) | Evaluate when | Primary documentation |
|---|---|---|---|
| Browser end-to-end testing | @playwright/test |
User-critical flows need validation in real browsers, beyond unit/component tests. Compare runtime/browser requirements and CI cost with the existing test pipeline. | Playwright documentation |
| Network/API mocking | msw |
Component and integration tests need realistic HTTP behavior shared across tests or development; it intercepts requests without coupling mocks to Axios-specific call sites. | MSW documentation |
| React rules and hook linting | eslint-plugin-react-hooks |
The application uses ESLint and needs automated enforcement of React's Rules of Hooks and related recommendations. Check the installed ESLint and plugin versions/config format first. | React repository plugin documentation, React lint reference |
| Automated accessibility checks | axe-core |
UI tests should catch a subset of detectable accessibility issues. Treat it as an aid to, not a substitute for, keyboard, screen-reader, and manual accessibility review. | axe-core documentation |
Overlap and selection notes
- Prefer one clear owner for each kind of state. React Query and Zustand can coexist, but avoid mirroring server cache data in global client stores without a specific requirement.
- Packages in the same broad category can have distinct roles: React Hook Form manages form state, Zod validates data at runtime, and the resolver connects them. Keep the three entries together when reviewing the form stack.
- UI libraries and standalone controls (React Bootstrap, React Select, React Color, React Number Format, toast and pane components) may coexist but should be checked for visual consistency, keyboard support, bundle impact, and Bootstrap version/scoping compatibility.
- A package can appear in more than one purpose discussion when it genuinely spans roles. Keep one canonical status entry above and cross-reference it rather than duplicating conflicting verification claims.
- Reassess packages when the application changes React major version, authentication model, build/test toolchain, deployment constraints, or required accessibility support.