https://github.com/giannif/react-storage-context

React - Get and set local and session storage easily using the Context API
https://github.com/giannif/react-storage-context

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/giannif/react-storage-context
• Owner: giannif
• Archived: true
• Created: 2018-05-01T15:29:26.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-02T17:57:06.000Z (about 6 years ago)
• Last Synced: 2024-03-29T09:45:01.238Z (3 months ago)
• Language: JavaScript
• Size: 404 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-react-context - **react-storage-context** - Handy util for getting/setting local storage and session storage built on the Context API. (Libraries)

README

        
# react-storage-context

[![NPM](https://img.shields.io/npm/v/react-storage-context.svg)](https://www.npmjs.com/package/react-storage-context) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Coverage Status](https://coveralls.io/repos/github/giannif/react-storage-context/badge.svg?branch=master)](https://coveralls.io/github/giannif/react-storage-context?branch=master)

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

## Install

```bash

yarn add react-storage-context

```

## Usage

`StorageContext`

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

```jsx

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

```jsx

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 
{someLocalVal}

  }

}

```


`Consumer`

```jsx

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

class App extends PureComponent {

  render() {

    // render props

    return (

      {({ session }) => 
Session storage values: {JSON.stringify(session, undefined, 4)}
}

    )

  }

}

```


## License

MIT © [giannif](https://github.com/giannif)