{"id":15652015,"url":"https://github.com/jamonholmgren/mst-async-storage","last_synced_at":"2025-04-30T17:21:56.819Z","repository":{"id":39979845,"uuid":"148803836","full_name":"jamonholmgren/mst-async-storage","owner":"jamonholmgren","description":"Brings AsyncStorage support to mobx-state-tree for React Native projects","archived":false,"fork":false,"pushed_at":"2022-05-20T03:40:35.000Z","size":344,"stargazers_count":31,"open_issues_count":3,"forks_count":12,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-19T04:43:19.979Z","etag":null,"topics":["mobx-state-tree","react-native","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamonholmgren.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-14T14:58:03.000Z","updated_at":"2024-02-25T08:14:50.000Z","dependencies_parsed_at":"2022-09-26T17:31:31.454Z","dependency_job_id":null,"html_url":"https://github.com/jamonholmgren/mst-async-storage","commit_stats":null,"previous_names":["skellock/mst-async-storage"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Fmst-async-storage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Fmst-async-storage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Fmst-async-storage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamonholmgren%2Fmst-async-storage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamonholmgren","download_url":"https://codeload.github.com/jamonholmgren/mst-async-storage/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251749121,"owners_count":21637457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobx-state-tree","react-native","typescript"],"created_at":"2024-10-03T12:40:57.823Z","updated_at":"2025-04-30T17:21:56.770Z","avatar_url":"https://github.com/jamonholmgren.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mst-async-storage\n\nA [mobx-state-tree](https://github.com/mobxjs/mobx-state-tree) extension granting your models React Native's `AsyncStorage` powers of persistance.\n\n# Requirements\n\n- `mobx-state-tree` 2.x or 3.x\n- `react-native` \u003e= 0.56\n- `@react-native-async-storage/async-storage` \u003e= 1.x.x\n\n# Installing\n\n```sh\nyarn add mst-async-storage\n```\n\n# Usage\n\nThe following async actions are added:\n\n```ts\nimport { types } from \"mobx-state-tree\"\nimport { withAsyncStorage } from \"mst-async-storage\"\n\nexport const NiceThingsModel = types\n  .model(\"NiceThings\")\n  .props({\n    unicorns: true,\n    dragons: true,\n    cake: true,\n    spiders: false,\n    nickleback: false,\n  })\n  .actions(self =\u003e ({\n    setSpiders(value: boolean) {\n      self.spiders = value\n    },\n  }))\n  .extend(withAsyncStorage({ key: \"nice.things\" })) // \u003c-- 🎉\n```\n\nNow you can load it:\n\n```js\nasync demo () {\n  // create your model as usual\n  const happy = NiceThingsModel.create()\n\n  // now load the data from async storage\n  await happy.load()\n\n  // and when you change something\n  happy.setSpiders(true)\n\n  // it will automatically save back to async storage!\n}\n```\n\nYou can also intercept the snapshot after it is loaded and before it is saved with `onLoad` and `onSave`.\n\n```ts\nimport { types } from \"mobx-state-tree\"\nimport { withAsyncStorage } from \"mst-async-storage\"\n\nexport const NiceThingsModel = types\n  .model(\"NiceThings\")\n  .props({\n    unicorns: true,\n    dragons: true,\n    cake: true,\n    spiders: false,\n    nickleback: false,\n  })\n  .actions(self =\u003e ({\n    setSpiders(value: boolean) {\n      self.spiders = value\n    },\n  }))\n  .extend(\n    withAsyncStorage({\n      key: \"nice.things\",\n      // always ensures that nickelback is loaded into MST as `false` here\n      onLoad: snapshot =\u003e {\n        return {\n          ...snapshot,\n          nickleback: false,\n        }\n      },\n      // always ensures that nickelback is saved to AsyncStorage as `false` here\n      onSave: snapshot =\u003e {\n        return {\n          ...snapshot,\n          nickelback: false,\n        }\n      },\n    }),\n  )\n```\n\n# Options\n\n`withAsyncStorage()` accepts an optional object as a parameter with these keys:\n\n| key      | type              | what it does                                                                             |\n| -------- | ----------------- | ---------------------------------------------------------------------------------------- |\n| key      | string            | The key to use when saving to AsyncStorage (default: the model type name)                |\n| autoSave | boolean           | Should we automatically save when any values change on the model? (default: `true`)      |\n| only     | string, string[]  | will only include the keys with these names                                              |\n| except   | string, string[]  | will omit keys with these names                                                          |\n| onLoad   | (snapshot) =\u003e any | Will be called after state is loaded from AsyncStorage. Return snapshot to change it.    |\n| onSave   | (snapshot) =\u003e any | Will be called before AsyncStorage, allowing you to modify the snapshot by returning it. |\n\n# Contributing?\n\nYes plz!\n\n```\nFork it, Clone it, Branch it, Yarn it\nBuild it, Test it, Push it, PR it\n```\n\nTo run the tests, I like to open two shells `yarn test:compile:watch` and `yarn test --watch`. If you run `ava` manually, make sure to add `-s` to run the tests serially because I fail mocking (because the mocks are shared state and bleed into each other).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonholmgren%2Fmst-async-storage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamonholmgren%2Fmst-async-storage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamonholmgren%2Fmst-async-storage/lists"}