useStorage

^{🕋 React hook using local storage on SSR, CSR, and React Native apps}
⚠ This is under active development. Stay tuned ⚠

npm i use-react-storage

Features

• SSR (server side rendering) support
• TypeScript support
• 1 dependency (use-ssr)
• 🚫 React Native support
• 🚫 Ionic suport
• 🚫 Persistent Storage
• 🚫 localForge support
• 🚫 Server localStorage support (redux-persist-node-storage)

Usage

Object Destructuring

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

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

Others

• react-use-localstorage
• react-use useSessionStorage
• youtube nextjs - persist state with cookies
• react-native-storage
• @react-native-community/async-storage
• apollo-cache-persist