Nacho Portmanteau Meltdown
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

mobx-cookie

2.0.1 • Public • Published
logo

mobx-cookie

Synchronises a cookie's value with a MobX observable, allowing observers to react to its changes.

Install

yarn add mobx-cookie
# or 
npm install mobx-cookie # npm v5+ 

Example

import { action, decorate, observable, computed } from 'mobx'
import Cookie from 'mobx-cookie'
 
class Store {
  cookie = new Cookie('thing')
 
  get thing() {
    return this.cookie.value
  }
 
  setThing = value => {
    this.cookie.set(value, { expires: 2 }) // 2 day expiry
  }
 
  unsetThing = () => {
    this.cookie.remove()
  }
}
 
decorate(Store, {
  cookie: observable,
  thing: computed,
  setThing: action,
  unsetThing: action,
})
 
const store = new Store()
 
// console: undefined
 
store.setThing('testing')
 
// console: "testing"
 
store.unsetThing()
 
// console: undefined

Usage

Import package

import Cookie from 'mobx-cookie'

Instantiate Cookie class

Initialise and set the key name of the cookie

new Cookie(name[, options]) // see set() method for options

e.g.

@observable cookie = new Cookie('name of cookie in browser')
// or
cookie = new Cookie('name of cookie in browser')
// and decorate
decorate(Store, {
  cookie: observable,
})

The observable now has the following methods:

value

Retrieve the value of the cookie stored in this observable

this.cookie.value // when cookie is updated, this will update too.

set(value[, options])

Set the value assigned to the observed cookie

this.cookie.set('value')

mobx-cookie is essentially a wrapper around the js-cookie package. Any options set as the second argument (as an object) will be passed to js-cookie.

e.g.

this.cookie.set('value', { expires: 2 }) // sets cookie to expire in two days.

remove()

Removes the cookie from the browser and sets the observable to undefined

this.cookie.remove()

License

MIT. See the LICENSE file for more information.

Credits

Thanks go to the creators of the dependency, js-cookie, and of course to Michel Weststrate for MobX.

The logo is comprised of MobX's official logo's background by osenvosem and a cookie icon from icons8.

Keywords

none

install

npm i mobx-cookie

Downloadsweekly downloads

7

version

2.0.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability