react-storage-context

Get and set local and session storage using the React Context API

Install

yarn add react-storage-context

Usage

StorageContext

Initializes and manages storage, setting the values of the StorageContext.Provider

import StorageContext from "react-storage-context"

@StorageContext("your-storage-id")
class App extends PureComponent {
  render() {
    // children that will read and write storage
  }
}

withStorageContext

Will provide the api as props:

• local local storage object
• session session storage object
• setLocal update local storage object
• setSession update session storage object

import { withStorageContext } from "react-storage-context"

@withStorageContext
class App extends PureComponent {
  render() {
    // props to read
    const {
      local: { someLocalVal },
      session
    } = this.props
    // props to invoke save methods
    const { saveLocal, saveSession } = this.props
    return <div>{someLocalVal}</div>
  }
}

Consumer

import { Consumer } from "react-storage-context"

class App extends PureComponent {
  render() {
    // render props
    return (
      <Consumer>{({ session }) => <div>Session storage values: {JSON.stringify(session, undefined, 4)}</div>}</Consumer>
    )
  }
}

License

MIT © giannif