Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomasrainford/react-persist-local-storage
A React hook for persisting and managing state in local storage.
https://github.com/thomasrainford/react-persist-local-storage
bun hooks localstorage npm-package react typescript
Last synced: 6 days ago
JSON representation
A React hook for persisting and managing state in local storage.
- Host: GitHub
- URL: https://github.com/thomasrainford/react-persist-local-storage
- Owner: ThomasRainford
- Created: 2023-11-16T20:53:18.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2023-12-17T02:05:25.000Z (11 months ago)
- Last Synced: 2024-10-16T11:19:01.811Z (21 days ago)
- Topics: bun, hooks, localstorage, npm-package, react, typescript
- Language: TypeScript
- Homepage:
- Size: 236 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-persist-local-storage
A React hook for persisting, syncing and managing state in local storage.
Supports object and string types.
## Features
- Keeps React state in sync with local storage.
- Keeps local storage in sync between windows.
- Add, update and delete local storage items.
- Type hinting when using objects!
## Example Usage:
### Initial value as `string`:
```tsx
import useLocalStorage from "react-persist-local-storage";
const Example = () => {
const key = "example.value";
const [value, setValue, deleteValue] = useLocalStorage(
key,
"string value"
);
return (
setValue(e.target.value)}
/>
{value}
deleteValue(key)}>
Delete "{key}"
);
};
export default Example;
```
### Initial value as `object`:
```tsx
import useLocalStorage, {
LocalStorageValue
} from "react-persist-local-storage";
const Example = () => {
const key = "example.value";
const [value, setValue, deleteValue] = useLocalStorage(key, {
value: "example value"
});
return (
setValue(
JSON.parse(e.target.value) as LocalStorageValue
)
}
/>
{/*
'value' is typed!
'value' is nullable as it can be removed from local storage.
*/}
{value?.value || ""}
deleteValue(key)}>
Delete "{key}"
);
};
export default Example;
```
## Reference
### `useLocalStorage(key, initialValue, options)`
#### Parameters
- `key`: The local storage key.
- `initialValue`: Initial value of the localstorage value.
- `options.sync`: Enable local storage syncing between windows.
#### Returns
##### `[value, setValue, deleteItem]`
1. The serialized local storage value.
2. Function for setting the local storage value.
3. Function for removing the local storage item.
## Development
### Requirements
- [Bun](https://bun.sh/)
#### To install dependencies:
```bash
bun install
```
#### Build in watch mode:
Note: The build uses `tsc` instead of `bun` as `Bun` currenlty has a bug where React is bundled in the build which causes the `Invalid hook call` error. Once this has been fixed, `bun` will be used.
```bash
bun dev
```
#### Run example:
```bash
cd ./examples
bun dev
```