Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/iamthesiz/use-react-storage
🕋 React hook for local storage on the server, browser, and react native
https://github.com/iamthesiz/use-react-storage
Last synced: 1 day ago
JSON representation
🕋 React hook for local storage on the server, browser, and react native
- Host: GitHub
- URL: https://github.com/iamthesiz/use-react-storage
- Owner: iamthesiz
- Created: 2019-10-15T10:21:10.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:57:48.000Z (about 2 years ago)
- Last Synced: 2025-01-26T12:01:38.609Z (4 days ago)
- Language: TypeScript
- Homepage:
- Size: 24.5 MB
- Stars: 14
- Watchers: 5
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
useStorage
🕋 React hook using local storage on SSR, CSR, and React Native apps
âš This is under active development. Stay tuned âš
Features
---------
- SSR (server side rendering) support
- TypeScript support
- 1 dependency ([use-ssr](https://github.com/alex-cory/use-ssr))
- 🚫 React Native support
- 🚫 [Ionic](https://ionicframework.com/docs/building/storage) suport
- 🚫 Persistent Storage
- 🚫 [localForge](https://github.com/localForage/localForage) support
- 🚫 Server localStorage support ([redux-persist-node-storage](https://github.com/pellejacobs/redux-persist-node-storage))
Usage
-------
### Object Destructuring
```jsx
import useStorage, {
useLocalStorage,
useCookie, // NOT IMPLEMENTED YET
useSessionStorage, // NOT IMPLEMENTED YET
useNativeStorage, // NOT IMPLEMENTED YET
useIonicStorage, // NOT IMPLEMENTED YET
useLocalForge, // NOT IMPLEMENTED YET
useServerStorage. // NOT IMPLEMENTED YET
} = 'use-react-storage'
const App = () => {
// SSR (server side rendered): cookies
// CSR (client side rendered): localStorage, unless using `useSessionStorage`
// Native (react native): AsyncStorage
const {
someKey1,
someKey2, // can grab the `items/keys` right out
set, // sets/overwrites the specified items
merge, // merges the items
has,
remove, // removes the specified items
clear, // clears the storage
flushGetRequests, // NOT IMPLEMENTED YET (Native Only)
allItems, // NOT IMPLEMENTED YET
errors, // NOT IMPLEMENTED YET
} = useStorage('someKey1', 'default-value-for-someKey1')
// usages for `set`
set({ someKey1: 'new value for someKey1' }) // for multi setting items
set('someKey1', 'new value for someKey1') // for setting individual item
// when the hook has a string argument such as useStorage('someKey1', 'default'), we assume if
// `set` has 1 string argument like below, that it is setting 'someKey1'
set('value for someKey1')
// usages for `remove`
remove('someKey1', 'someKey2') // would remove both items from storage
// usages for `merge`
merge('person[23eqad-person-id].name', 'Alex') // I think people will like this one more
merge({ // this syntax is up in the air, might do it in a callbacky kinda way like useState's setState(x => ({ ...x }))
person: {
[23eqad-person-id]: {
name: 'Alex'
}
}
})
// OR
const {
someKey1,
someKey2,
set,
has,
merge,
remove,
clear,
flushGetRequests, // NOT IMPLEMENTED YET (Native Only)
allItems, // NOT IMPLEMENTED YET
errors, // NOT IMPLEMENTED YET
} = useStorage({
someKey1: 'default-1',
someKey2: 'default-2'
})
}
```
### Array Destructuring
```js
import useStorage from 'use-react-storage'
const App = () => {
const [token, setToken, removeToken] = useStorage('token', 'default-value-for-token')
// used like
setToken('the-new-token')
removeItem()
// OR
const [items, set, remove] = useStorage({
item1: 'default-value-for-item-1',
item2: 'default-value-for-item-2',
})
const { item1, item2 } = items
// used like
set({
item1: 'no',
item2: 'way'
})
set('item1', 'new value for item1')
remove('item1', 'item2')
}
```
By default this will determine where your app is and decide which storage to use.
If your app is SSR (server side rendered), a flag will be set and it will default to using `Cookies` for storage
If your app is CSR (client side rendered), in the `browser` it will default to `localStorage`
If your app is Native, it will default to [`AsyncStorage`](https://facebook.github.io/react-native/docs/asyncstorage)
### Others
- [react-use-localstorage](https://github.com/dance2die/react-use-localstorage/blob/master/src/index.ts)
- [react-use useSessionStorage](https://github.com/streamich/react-use/blob/master/docs/useSessionStorage.md)
- [youtube nextjs - persist state with cookies](https://www.youtube.com/watch?v=_AYuhmz-fX4&t=0s)
- [react-native-storage](https://github.com/sunnylqm/react-native-storage)
- [@react-native-community/async-storage](https://github.com/react-native-community/async-storage)
- [apollo-cache-persist](https://github.com/apollographql/apollo-cache-persist#storage-providers)