Use when developing or modifying the @handsontable/react-wrapper package - React components, hooks, settings mapping, and selection state preservation during updateSettings
wrappers/react-wrapper/
forwardRef wrapper that handles the actual instance lifecycle.A useRef() hook holds the live Handsontable instance. It is exposed to parent components through useImperativeHandle(), so consumers can call hotInstance.current to access the grid API directly.
SettingsMapper.getSettings() converts React props into a plain Handsontable settings object. Every prop change triggers on the instance.
updateSettings()Critical rule: When calling updateSettings(), you must preserve and restore the current selection. Before the call, snapshot the selection with selection.exportSelection(). After the call, restore it with selection.importSelection(). Forgetting this causes the selection to reset on every prop change.
useHotEditor() - a hook for building component-based cell editors. It gives the editor component access to the editor lifecycle (open, close, getValue, setValue).npm run test --prefix wrappers/react-wrappernpm run build --prefix handsontable. Wrappers consume handsontable/tmp/, not dist/.| File | Purpose |
|---|---|
src/hotTable.tsx | Public HotTable component |
src/hotTableInner.tsx | Inner component with instance lifecycle |
src/settingsMapper.ts | Converts React props to Handsontable settings |
src/hotColumn.tsx | Declarative column config component |
src/hotEditor.tsx | Custom editor portal component |
React StrictMode causes a double mount (mount -> unmount -> mount). This means Handsontable gets initialized twice. The wrapper must correctly destroy the instance on unmount and create a fresh one on the second mount. If cleanup is incomplete, the second mount can fail or leak memory. Always verify that destroy() is called on unmount and that no stale references persist.
handsontable/src/..mjs helpers instead of bash-only constructs (see scripts/prepare-types.mjs as reference).