dhx-react-suite

23 production-ready React UI components — TypeScript reimplementation of DHTMLX Suite v9.3.0.

Features

• ✅ Full TypeScript types — every prop, callback and option is typed
• 🌲 Tree-shakeable — import only what you use (sideEffects: false)
• 🎨 Design tokens — single object to theme the entire library
• 🔗 Zero CSS dependencies — styles injected once, no stylesheet to import
• ⚡ Recharts optional — only needed if you use <Chart />
• 🧪 Tested — Vitest + Testing Library

Components

| Component | Description | |---|---| | Button | 4 variants, 3 sizes | | Toolbar | Buttons, inputs, selects, separators | | Sidebar | Collapsible navigation with nested items | | Layout | Row / column panel grid | | Tabbar | 4 placement modes (top/bottom/left/right) | | Grid | Sortable, filterable, resizable data table | | Chart | Bar, Line, Area, Pie, Donut, Radar, Scatter via Recharts | | Calendar | Single & range date picker | | Timepicker | Scrollable hour/minute/AM-PM picker | | Combobox | Searchable select with multi-select | | Slider | Single & range modes with tick marks | | Colorpicker | HSL sliders + 26-colour palette | | Menu | Dropdown with nested submenus | | ContextMenu | Right-click context wrapper | | Popup | Click-triggered floating panel | | Window | Draggable modal/dialog | | MessageProvider / useMessage | Toast/alert/confirm system | | List | Keyboard navigation, inline editing | | DataView | CSS grid card gallery | | Tree | Hierarchical data, checkboxes, editing | | Pagination | Smart page-range window | | Form | Schema-driven, 12 field types, validation | | Ribbon | Office-style grouped toolbar | | Navbar | Horizontal / vertical navigation bar |

Installation

npm install dhx-react-suite
# Recharts is only required if you use the Chart component
npm install recharts

Quick Start

import { MessageProvider, Button, Grid, useMessage } from "dhx-react-suite";

// 1. Wrap your app in MessageProvider
function App() {
  return (
    <MessageProvider>
      <MyPage />
    </MessageProvider>
  );
}

// 2. Use components
function MyPage() {
  const msg = useMessage();
  return (
    <Button onClick={() => msg.message({ type: "success", title: "Hello!" })}>
      Show toast
    </Button>
  );
}

Theming

Override any token before first render:

import { tokens } from "dhx-react-suite";
tokens.primary   = "#7c3aed";  // violet theme
tokens.primaryDk = "#5b21b6";

Grid Example

import { Grid } from "dhx-react-suite";

const columns = [
  { id: "name",   header: "Name",   width: 200 },
  { id: "email",  header: "Email",  width: 280 },
  { id: "status", header: "Status", width: 120,
    template: (val) => <span style={{ color: val === "active" ? "green" : "red" }}>{val}</span> },
];

<Grid
  columns={columns}
  data={users}
  height={500}
  selection="row"
  onSelect={(row) => console.log(row)}
/>

Chart Example

import { Chart } from "dhx-react-suite";

const data   = [{ month: "Jan", sales: 40 }, { month: "Feb", sales: 65 }];
const series = [{ id: "sales", value: "sales", label: "Sales", color: "#0288d1" }];

<Chart type="bar" data={data} series={series} scales={{ bottom: { text: "month" } }} height={300} />

// Pie / Donut — just pass simple {label, value} data, no series needed
<Chart type="pie" data={[{ x: "React", value: 40 }, { x: "Vue", value: 25 }]} height={300} />

Building / Publishing

# Install deps
npm install

# Build (types + bundle)
npm run build

# Run tests
npm test

# Publish to npm (runs build automatically via prepublishOnly)
npm publish

License

MIT