The `di-widgets-framework` is a React-based library for creating interactive, customizable widget dashboards with integrated drag-and-drop functionality. Currently at version 1.9.6, it offers components like `WidgetPalette` for widget selection and `WidgetSettingsPanel` for extensive configuration, including styling, behavior, and type-specific options. This framework differentiates itself through dynamic loading of widget types from a backend API, built-in search for widgets, and a comprehensive settings panel supporting various widget categories (e.g., search, filter, results, analytics, header, footer, text, agent). While no explicit release cadence is stated, the versioning indicates active maintenance and development. It ships with TypeScript types for enhanced developer experience.
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
The library uses named exports, primarily designed for ES Modules. CommonJS `require` syntax is not recommended and may lead to issues.
import { WidgetPalette } from 'di-widgets-framework';
Components are exported as named exports from the main package entry point, not as default exports or from sub-paths.
import { WidgetSettingsPanel } from 'di-widgets-framework';
For TypeScript projects, it's best practice to use `import type` for interfaces and types to ensure they are stripped from the JavaScript output, avoiding accidental runtime imports.
import type { Widget } from 'di-widgets-framework';
This example demonstrates how to integrate `WidgetPalette` into a React application, showing a basic setup for a widget dashboard environment and highlighting the `widgetBackendUrl` prop.
import React from 'react';
import { WidgetPalette, WidgetDashboard } from 'di-widgets-framework';
function App() {
// In a real application, you might fetch available widgets dynamically
const availableWidgetTypes = [
{ id: 'search', name: 'Search Input', description: 'Search input widget' },
{ id: 'filter', name: 'Data Filter', description: 'Filter/facet widget' },
{ id: 'results', name: 'Results Display', description: 'Results display widget' },
{ id: 'analytics', name: 'Analytics Chart', description: 'Analytics/charts widget' },
];
return (
<div style={{ display: 'flex', height: '100vh', padding: '20px' }}>
<div style={{ width: '25%', paddingRight: '20px', borderRight: '1px solid #eee' }}>
<h3>Widget Palette</h3>
<WidgetPalette
widgetBackendUrl="http://localhost:3001"
// In a real app, you might pass availableWidgetTypes as a prop if not fetched by backend
/>
</div>
<div style={{ flex: 1, paddingLeft: '20px' }}>
<h3>Dashboard Area</h3>
{/* WidgetDashboard component would be used here to render dropped widgets */}
{/* Example: <WidgetDashboard backendUrl="http://localhost:3001" /> */}
<p>Drag widgets from the palette onto this area.</p>
</div>
</div>
);
}
export default App;
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.