Registry / database / ra-data-local-storage

ra-data-local-storage

library5.14.7jsnpmunverified

A react-admin data provider that stores data in the browser's localStorage, enabling local-first apps and testing without a backend. Version 5.14.7, released as part of the react-admin ecosystem. Uses FakeRest internally for filtering, sorting, pagination, and full-text search. Supports cross-tab persistence, optional logging, and configurable localStorage keys and update delays. Default data can be seeded via the `defaultData` option.

database testing

npm install ra-data-local-storage

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RA-DATA-LOCAL-STOR

ra-data-local-storage

databasejavascriptv5.14.7

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import localStorageDataProvider from 'ra-data-local-storage'

✗ const localStorageDataProvider = require('ra-data-local-storage')

Package is ESM-only; CommonJS require is not supported. TypeScript types included.

DataProvider

✓ import type { DataProvider } from 'ra-core'

✗ import type { DataProvider } from 'ra-data-local-storage'

The data provider type is defined in ra-core, not in this package.

defaultData

✓ const dataProvider = localStorageDataProvider({ defaultData: { posts: [] } })

✗ const dataProvider = localStorageDataProvider({ defaultData: [] })

defaultData must be an object with resource keys, not an array.

A minimal react-admin app using a local storage data provider with seeded default data.

import * as React from 'react'; import { Admin, Resource, List, Datagrid, TextField } from 'react-admin'; import localStorageDataProvider from 'ra-data-local-storage'; const dataProvider = localStorageDataProvider({ defaultData: { posts: [ { id: 1, title: 'Hello, world!' }, { id: 2, title: 'Second post' } ] } }); const PostList = () => ( <List> <Datagrid> <TextField source="id" /> <TextField source="title" /> </Datagrid> </List> ); const App = () => ( <Admin dataProvider={dataProvider}> <Resource name="posts" list={PostList} /> </Admin> ); export default App;

Debug

Known issues

deprecatedThe package uses `defaultData` option, which may be deprecated in future versions. Prefer initializing data via `useDataProvider` hooks.

fix

Consider using `useDataProvider` in a custom app component to populate initial data.

affects: *

gotchaData is only persisted to localStorage after a configurable delay (default 10ms). Rapid updates may not be saved if the browser tab is closed immediately.

fix

Reduce `localStorageUpdateDelay` to 0 for immediate persistence, or ensure data is flushed before unload using `beforeunload` event.

affects: *

gotchalocalStorage has a size limit (~5-10MB depending on browser). Storing large datasets will cause quota errors.

fix

Monitor localStorage usage and consider alternative storage (e.g., IndexedDB) for large amounts of data.

affects: *

gotchaCross-tab synchronization uses `storage` event, but changes made in the same tab are not broadcast to other tabs until the next write.

fix

Design your app to refresh data periodically or after a write to ensure consistency.

affects: *

Errors

Common errors & fixes

Uncaught TypeError: localStorageDataProvider is not a function

Using CommonJS require() instead of ES module import.

fix

Ensure your project is configured for ES modules. Use `import localStorageDataProvider from 'ra-data-local-storage'` instead of `require()`.

Error: No data provider found. Did you forget to set the 'dataProvider' prop on the <Admin> component?

The data provider was not passed to <Admin> or was incorrectly initialized.

fix

Ensure you call `localStorageDataProvider()` and pass the result as the `dataProvider` prop: `<Admin dataProvider={dataProvider}>`.

Warning: Each child in a list should have a unique "key" prop.

Default data objects missing an `id` property.

fix

Ensure every resource object in `defaultData` has a unique `id` field.

Upgrade

Version history

5.14.7latest on npm

Audit

Dependencies

ra-corerequiredRequired for data provider interface compatibility with react-admin

Agent activity

13 hits · last 30 days

node