Installation

Router requirement

This library uses useBlocker from React Router to guard against accidental navigation away from forms with unsaved changes. This feature requires a data router (createBrowserRouter or createHashRouter) — it does not work with the legacy <BrowserRouter> component.

Recommended setup — let React Admin manage the router internally (do not wrap SchemaAdmin in your own router):

// ✅ Correct — React Admin creates a data router internally
<SchemaAdmin ... />

If your app needs to control the router (e.g. for basename), use createBrowserRouter:

// ✅ Also correct — explicit data router
import {createBrowserRouter, RouterProvider} from 'react-router-dom';

const router = createBrowserRouter([{path: '*', element: <SchemaAdmin ... />}]);

<RouterProvider router={router} />

// ❌ Avoid — legacy router, unsaved-changes guard will be silently disabled
<BrowserRouter>
  <SchemaAdmin ... />
</BrowserRouter>

Usage in the project

Pick the source you consume the library from — the published package for normal project work, a local checkout when you develop the library and the project side by side.

NPM package registry

pnpm add habarico

Every framework dependency is a peer dependency — the library bundles none of them, so install them in the project yourself, in a version that satisfies the range:

Peer	Range
react / react-dom	^18.0.0 || ^19.0.0
react-admin, ra-core, ra-ui-materialui, ra-i18n-polyglot	~5.14.5
react-router / react-router-dom	^6.0.0 || ^7.0.0
react-hook-form	^7.72.0
@mui/material, @mui/icons-material	^7.0.0
@mui/x-data-grid, @mui/x-charts, @mui/x-date-pickers	^9.3.0
@mui/x-tree-view	^9.1.0
@emotion/react, @emotion/styled	^11.0.0
@tanstack/react-query	^5.0.0

caution

The React Admin packages are pinned to a patch range (~5.14.5), not a major one. A project on a different React Admin minor will hit duplicated contexts — two copies of ra-core in the bundle means the store, the identity and the notification system stop being shared.

Local repository