# react-context-storage

> HOCs for React Context Storage

Latest version **1.0.7** (published 2020-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-context-storage
pnpm add react-context-storage
yarn add react-context-storage
bun add react-context-storage
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2020-12-30 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aleksandr Novikov |
| Maintainers | a.novikov |
| Keywords | react, storage, store, context, state, redux |

## Links

- npm: https://www.npmjs.com/package/react-context-storage
- Repository: https://github.com/aleksandr-novikov/react-context-storage
- Homepage: https://github.com/aleksandr-novikov/react-context-storage#readme
- Issues: https://github.com/aleksandr-novikov/react-context-storage/issues
- npm.io page: https://npm.io/package/react-context-storage

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.7 (latest) — 2020-12-30
- 1.0.6 — 2020-04-11
- 1.0.5 — 2020-04-10
- 1.0.4 — 2020-04-10
- 1.0.3 — 2020-04-10
- 1.0.2 — 2020-04-10
- 1.0.1 — 2020-04-06
- 1.0.0 — 2020-04-05

## README

# react-context-storage

This is a very lightweight(~5kb) alternative to Redux store based on React Context API. Supports multiple storages, reducers, saving to LocalStorage and SessionStorage.


## Installation
```
npm install react-context-storage
```

## Requirements
React v^16.9.0

## API

### withStorageProvider
```typescript
withStorageProvider(
{
  storageName: string, // Name of your storage
  defaultValues: object, // Default state of your storage
  reducer: (state: object, action: { type: string, value: any }) => object, // Reducer that takes in storage state, modifies it based on action type and returns a new state
  useSession: boolean, // Save storage to SessionStorage and retrieve it next time by storageName
  useLocal: boolean, // Save storage to LocalStorage and retrieve it next time by storageName
}
)(
  Provider: React.ComponentType // This component will provide Storage access to the child components
)
```

### withStorage

```typescript
withStorage(
  storageName: string
)(
  Consumer: React.ComponentType // Storage will be passed to this component via "context" prop
)
```

## Usage

Please check out [src/sample-app](src/sample-app) for a live demo.

```tsx
import React from 'react';
import { withStorageProvider, withStorage } from 'react-context-storage';
import { INCREMENT_COUNTER } from './actions';
import { counterReducer } from './reducers';

const storageName = 'counter-storage';
const defaultValues = {
  counter: 0,
};
const useSession = true;
const useLocal = false;

/* 
Consumer component that will have a "context" prop which contains:
  storage - storage object
  dispatch - function that dispatches an action which gets passed into reducer
*/
const Consumer = ({
  context: {
    storage: { counter },
    dispatch,
  },
}) => {
  const onClick = () => dispatch({ type: INCREMENT_COUNTER, value: 1 });
  return (
    <>
      <button type="submit" onClick={onClick}>
        Increment counter
      </button>
      <p>{`Counter value: ${counter}`}</p>
    </>
  );
};

/*
Wraps Consumer component with Storage.
*/
const ConsumerWithStorage = withStorage(storageName)(Consumer);

/*
Should be wrapped with Storage Provider.
*/
const App = () => (
  <>
    <h2>Counter App</h2>
    <ConsumerWithStorage />
  </>
);

/* 
Wraps parent component with Storage Provider allowing using Storage in children components.
Pass in your reducer to handle actions dispatched in Consumer components.
*/
export const AppWithStorageProvider = withStorageProvider({
  storageName,
  defaultValues,
  reducer: counterReducer,
  useSession,
  useLocal,
})(App);
```

## License

Copyright (c) 2020 Aleksandr Novikov. MIT License.

---
_Source: https://npm.io/package/react-context-storage · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._