react-grid-layout/react-draggable

This system is a React library that provides draggable UI components, specifically exposing Draggable and DraggableCore elements for handling user interaction. It supports advanced features such as axis constraints, grid snapping, bounds clipping, and touch events, while ensuring compatibility with modern React versions. The library is engineered for robustness, offering Content Security Policy nonce support and defensive guards for server-side rendering environments.

The library now includes TypeScript type definitions and a dedicated typings folder containing a test file and configuration files to validate the public API. The test file verifies that props such as allowMobileScroll, nodeRef, and positionOffset are correctly typed for Draggable and DraggableCore components, ensuring type safety for consumers using both React 18 and React 19.

typings · high confidence

The project has migrated its source code from Flow to TypeScript and replaced the Karma/Jasmine test runner with Vitest. The build process now uses tsup to generate CommonJS, ESM, and TypeScript declaration files, while Webpack is retained solely for the UMD bundle. This change introduces a new ESLint flat config, updates the CI configuration to use Node 10 and 12, and adds a \.browserslistrc\ file to define supported browser versions.

(repo-wide) · high confidence

The example application has been completely restyled with a new cyberpunk visual theme (dark background, neon accents, and specific fonts) and upgraded to use React 18 via CDN. The previous minimal example entry point has been replaced by a comprehensive demo page showcasing various Draggable configurations, including axis constraints, grid snapping, bounds, handles, controlled positioning, and drop detection.

example · high confidence

The internal utility modules in lib/utils have been rewritten from Flow to TypeScript, introducing strict type definitions for drag events, positions, and bounds. This migration includes a new feature for Content Security Policy compliance: the library now supports injecting a nonce into its dynamically created style element (used to prevent text selection during dragging) via an explicit prop or by reading the webpack \_\_webpack\nonce\\_ variable. Additionally, the codebase now includes defensive guards for browser-only APIs (like window and process) to prevent crashes in server-side or non-browser bundling environments.

lib/utils · high confidence

The library source has been rewritten from legacy ES5 React.createClass components to modern ES6 classes in TypeScript (Draggable.tsx, DraggableCore.tsx). This introduces a new \<DraggableCore\> component for advanced usage, adds support for touch events and grid snapping, and allows specifying a drag handle or cancel selector. The legacy lib/draggable.js, lib/main.js, and lib/styles.css files have been removed in favor of the new TypeScript implementation and entry points (cjs.ts, umd.ts).

lib · high confidence

Added \scripts/check-release.cjs\ to prevent publishing from dirty trees, detached HEAD, or non-fast-forward states, and to verify the version is not already on npm. Added \scripts/verify-build.cjs\ to assert that CJS exports return the component directly, UMD bundles expose the \ReactDraggable\ global, generated \.d.ts\ files do not leak \prop-types\ dependencies, browser-facing bundles contain no unguarded \process\ references, and ESM consumers receive correct ESM type declarations via the \exports\ map.

scripts · high confidence

Added browser-based integration tests for React Draggable; Added comprehensive test suite for Draggable and DraggableCore; Added comprehensive unit tests for utility functions and migrated test runner to Vitest.

The project has upgraded its development dependencies to React 19 and React DOM 19, alongside a comprehensive migration of the build and test tooling. The build system now uses TypeScript, tsup, and webpack 5, replacing the previous Babel/Rollup setup, and the test suite has moved from Karma/Jasmine to Vitest with JSDOM and Puppeteer for browser testing. The package exports are now structured to support modern ESM and CommonJS consumers with explicit type definitions, and the published files are organized under a new \build\ directory structure.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 66 → 67 (+0.8)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 75 → 75 (+0.0)
• Architecture 94 → 96 (+1.2)
• Maturity 61 → 61 (+0.1)
• Readiness 62 → 64 (+1.8)
• Security 75 → 78 (+3.2)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Documentation: no usage examples (README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• Hotspot: lib/DraggableCore.tsx (lib/DraggableCore.tsx)
• Off-boarding risk: anonymized user #1

• Documentation: no project overview (README.md)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• Off-boarding risk: anonymized user #1

• 1 commits — 1 feature/other, 0 fixes

• .out-of-scope/auto-scroll.md — 1 commit

• change: docs: record out-of-scope feature requests from issue triage (#824)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

react-grid-layout/react-draggable was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.