https://github.com/sleeplessbyte/use-memory-value
Hooks to store a value in memory and optionally in locally available storage.
https://github.com/sleeplessbyte/use-memory-value
Last synced: 10 months ago
JSON representation
Hooks to store a value in memory and optionally in locally available storage.
- Host: GitHub
- URL: https://github.com/sleeplessbyte/use-memory-value
- Owner: SleeplessByte
- License: mit
- Created: 2020-05-31T01:44:27.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:29:06.000Z (almost 3 years ago)
- Last Synced: 2024-10-18T19:46:18.971Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 201 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# use-memory-value
Hooks for global state in memory and localstorage. It's like context, but only one state per value; allows you to subscribe and update values from far away.
Using Expo? Check out this implementation: [`expo-use-memory-value`](https://github.com/SleeplessByte/expo-use-memory-value).
## Installation
```bash
yarn add use-memory-value
```
It has the following peerDependencies, along with `react`:
```bash
yarn add localforage react-fast-compare
# assumes react is already installed
```
## Usage
Start by creating a new `MemoryValue` or `StoredMemoryValue`. You can declare this in any file, make sure it's exported and importable from all the files you want to use the value.
```typescript
import { MemoryValue } from 'use-memory-value';
interface State {
foo: number;
bar: string;
baz?: boolean;
}
const INITIAL_STATE: State = {
foo: 42,
bar: 'yes',
};
export const MY_STATE = new MemoryValue(INITIAL_STATE);
```
Then, where you want to use the value, import the `MemoryValue` and `useMemoryValue`:
```tsx
import { useMemoryValue, useMutableMemoryValue } from 'use-memory-value';
import { MY_STATE } from '../path/to/state';
function ReadOnlyBar() {
const state = useMemoryValue(MY_STATE);
return
foo: {state && state.foo}
;
}
function CountingFoo() {
const [state, updateState] = useMutableMemoryValue(MY_STATE);
const increment = () =>
updateState((prev) => ({ ...prev, foo: prev.foo + 1 }));
return (
Foo: {state.foo}
);
}
function ActivateBaz() {
const [, updateState] = useMutableMemoryValue(MY_STATE);
const activate = () => updateState((prev) => ({ ...prev, baz: true }));
return (
Activate
);
}
```
If the value should be persisted to (and initialized from) local storage, use `StoredMemoryValue`:
```typescript
export const MY_STATE = new StoredMemoryValue('local.key.name');
```
## TypeScript warnings
It is _important_ to use `type` and not `interface` when using this in conjunction with TypeScript. The reason for this is that `interfaces` are _extendible_ and thus we can not safely say that the final resolved shape is serializable (JSON-compatible). `types` are fixed, and thus can be checked.
You want this because non-serializable fields would be lost during serialization/deserialization, and thus can cause run-time issues.
If you get errors that the type is not `Serializable`, make sure you're only using `type` and not `interface`.
## Localforage configuration
You can set the instance yourself by importing
```typescript
import { setLocalForageInstance } from 'expo-use-memory-value/storage.web';
```