Registry / storage / react-storage-context

react-storage-context

library1.0.1jsnpmunverified

react-storage-context is a React library that provides a context-based API for reading and writing to localStorage and sessionStorage. Version 1.0.1 is the current stable release. It uses React's Context API to manage storage values and exposes a higher-order component (@StorageContext) and a consumer component to access storage data. Differentiators include simple decorator syntax and both local and session storage support in a single package. However, the package is unmaintained since 2019, with no TypeScript support and limited community adoption.

storage

npm install react-storage-context

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-STORAGE-CONT

react-storage-context

storagejavascriptv1.0.1

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 (StorageContext)

✓ import StorageContext from 'react-storage-context'

✗ const StorageContext = require('react-storage-context').default

The default export is a decorator/HOC. In CommonJS, require returns the module object which has a default property.

withStorageContext

✓ import { withStorageContext } from 'react-storage-context'

✗ import withStorageContext from 'react-storage-context'

withStorageContext is a named export, not default.

Consumer

✓ import { Consumer } from 'react-storage-context'

✗ import Consumer from 'react-storage-context'

Consumer is a named export.

Shows how to set up StorageContext decorator, use withStorageContext HOC, and use Consumer to read storage.

import React from 'react' import ReactDOM from 'react-dom' import StorageContext, { withStorageContext, Consumer } from 'react-storage-context' @StorageContext('my-storage') class App extends React.Component { render() { return ( <div> <Consumer> {({ local, session }) => ( <div> <p>Local: {JSON.stringify(local)}</p> <p>Session: {JSON.stringify(session)}</p> <button onClick={() => this.props.saveLocal({ key: 'value' })}>Save</button> </div> )} </Consumer> </div> ) } } ReactDOM.render(<App />, document.getElementById('root'))

Debug

Known issues

gotchaStorageContext must be applied as a decorator to the root component. If not used, child components cannot access storage.

fix

Ensure the root component is decorated with @StorageContext('your-id') before using withStorageContext or Consumer.

affects: >=1.0.0

gotchaThe storage ID passed to StorageContext must be unique per app instance to avoid conflicts.

fix

Use a unique string identifier for each app, e.g., 'my-app-123'.

affects: >=1.0.0

breakingThe package is abandoned since 2019; no updates for React 16.8+ or concurrent mode.

fix

Consider migrating to modern alternatives like 'use-local-storage' or 'react-storage-hooks' that support hooks and are actively maintained.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'react-storage-context'

Package not installed or import path incorrect.

fix

Run 'yarn add react-storage-context' or 'npm install react-storage-context'.

Uncaught TypeError: Cannot destructure property 'local' of 'undefined'

Using Consumer without wrapping in a StorageContext decorated component.

fix

Ensure the parent component is decorated with @StorageContext.

TypeError: Super expression must either be null or a function, not undefined

Using the class decorator syntax without Babel's legacy decorator transform.

fix

Enable decorators in Babel: add '@babel/plugin-proposal-decorators' with 'legacy: true'.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

20 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/giannif/react-storage-context ↗

packagereact-storage-context ↗

homepagehttps://github.com/giannif/react-storage-context#readme ↗