Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brokeboiflex/zustand-chrome-storage
Middleware for persistent Zustand in chrome extension development
https://github.com/brokeboiflex/zustand-chrome-storage
chrome-extension crxjs zustand zustand-persist
Last synced: about 2 months ago
JSON representation
Middleware for persistent Zustand in chrome extension development
- Host: GitHub
- URL: https://github.com/brokeboiflex/zustand-chrome-storage
- Owner: brokeboiflex
- Created: 2024-07-19T19:41:00.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-07-23T17:48:36.000Z (6 months ago)
- Last Synced: 2024-11-20T16:55:54.920Z (about 2 months ago)
- Topics: chrome-extension, crxjs, zustand, zustand-persist
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/zustand-chrome-storage
- Size: 56.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Usage
⚠️ This package is for use within chrome extensions only ⚠️
Just import the type of storage you need and use it like you would normally.
Refer to `chrome.storage` [documentation](https://developer.chrome.com/docs/extensions/reference/api/storage) for more info about specific storage.
```js
import {
ChromeLocalStorage,
ChromeSessionStorage,
ChromeSyncStorage,
} from "zustand-chrome-storage";
const useFishLocalStore = create(
persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: "food-storage", // Name of the item in chrome.storage.local
storage: createJSONStorage(() => ChromeLocalStorage),
}
)
);
const useFishSessionStore = create(
persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: "food-storage", // Name of the item in chrome.storage.session
storage: createJSONStorage(() => ChromeSessionStorage),
}
)
);
const useFishSyncStore = create(
persist(
(set, get) => ({
fishes: 0,
addAFish: () => set({ fishes: get().fishes + 1 }),
}),
{
name: "food-storage", // Name of the item in chrome.storage.sync
storage: createJSONStorage(() => ChromeSyncStorage),
}
)
);
```