react-storage-context

Get and set local and session storage

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-storage-context
801.0.15 years ago5 years agoMinified + gzip package size for react-storage-context in KB

Readme

react-storage-context
NPM JavaScript Style Guide Coverage Status
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