{"id":20196885,"url":"https://github.com/itsjonq/use-moxie","last_synced_at":"2025-07-14T07:39:02.436Z","repository":{"id":146984905,"uuid":"291526222","full_name":"ItsJonQ/use-moxie","owner":"ItsJonQ","description":"🔗 React hook that integrates with Moxie - an online REST API for prototyping.","archived":false,"fork":false,"pushed_at":"2020-09-02T14:34:25.000Z","size":278,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T09:38:35.295Z","etag":null,"topics":["hooks","moxie","prototyping","react","rest-api"],"latest_commit_sha":null,"homepage":"https://moxie.vercel.app/","language":"JavaScript","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/ItsJonQ.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-30T18:14:41.000Z","updated_at":"2022-10-02T18:30:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"7be41edc-1c10-4bc2-b3cc-f8f279b43fe7","html_url":"https://github.com/ItsJonQ/use-moxie","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-moxie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-moxie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-moxie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fuse-moxie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/use-moxie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248201000,"owners_count":21064013,"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":["hooks","moxie","prototyping","react","rest-api"],"created_at":"2024-11-14T04:26:30.710Z","updated_at":"2025-04-10T10:45:20.369Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🔗 use-moxie\n\n[![npm version](https://badge.fury.io/js/use-moxie.svg)](https://badge.fury.io/js/use-moxie)\n\n\u003e React hooks that integrates with [Moxie](https://usemoxie.xyz/) - an online REST API for prototyping.\n\n## Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n-   [Installation](#installation)\n-   [Usage](#usage)\n-   [API](#api)\n    -   [useMoxie({ username, collection, initialState, actionReducer })](#usemoxie-username-collection-initialstate-actionreducer-)\n    -   [useMoxieState({ username, collection, initialState, actionReducer })](#usemoxiestate-username-collection-initialstate-actionreducer-)\n-   [Example](#example)\n-   [Offline Support](#offline-support)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n```\nnpm install --save use-moxie\n```\n\n## Usage\n\nUse the `useMoxie` hook by passing along a `username` and `collection` as props:\n\n```jsx\nimport React from 'react';\nimport { useMoxie } from 'use-moxie';\n\nconst Example = () =\u003e {\n\tconst { data, didInitialFetch, loading } = useMoxie({\n\t\tusername: '@itsjonq',\n\t\tcollection: 'use-moxie-demo',\n\t});\n\n\tif (!didInitialFetch \u0026\u0026 loading) {\n\t\treturn \u003cdiv\u003e...\u003c/div\u003e;\n\t}\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t{data.map((entry) =\u003e (\n\t\t\t\t\u003cdiv key={entry.id}\u003e{entry.message}\u003c/div\u003e\n\t\t\t))}\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\n## API\n\n### useMoxie({ username, collection, initialState, actionReducer })\n\nUsed to manage a collection (`Array`) of entries (`object`).\n\nNote: Updates (from `actions`) from the `useMoxie` hook makes a network request to Moxie server. Avoid making rapid updates (e.g. update per keystroke).\n\n##### `username`\n\nType: `string`\n\nYour username for Moxie. It must start with an `@`. Example: `@itsjonq`.\n\n##### `collection`\n\nType: `string`\n\nThe name of the collection for your data. If it doesn't exist under your Moxie username, Moxie will create it for you automatically when you add your first entry.\n\n##### `initialState`\n\nType: `Array\u003cobject\u003e`\n\nA collection of data to set as initial state. This state will be synced with Moxie on initial load.\n\n##### `actionReducer`\n\nType: `function`\n\nA callback function that dispatches events when `useMoxie` performs API actions.\n\nExample:\n\n```jsx\nconst { actions, data, didInitialFetch, loading } = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo',\n\tactionReducer: (type) =\u003e console.log(type),\n});\n```\n\n| Action Type      | Description                                        |\n| ---------------- | -------------------------------------------------- |\n| `GET_FAILED`     | `get` request has failed.                          |\n| `GET_STARTED`    | `get` request has started.                         |\n| `GET_SUCCESS`    | `get` request has succeed.                         |\n| `GET_OFFLINE`    | `get` request bypassed. Currently offline.         |\n| `POST_FAILED`    | `post` request has failed.                         |\n| `POST_STARTED`   | `post` request has started.                        |\n| `POST_SUCCESS`   | `post` request has succeed.                        |\n| `POST_OFFLINE`   | `post` request saved locally. Currently offline.   |\n| `PUT_FAILED`     | `put` request has failed.                          |\n| `PUT_STARTED`    | `put` request has started.                         |\n| `PUT_SUCCESS`    | `put` request has succeed.                         |\n| `PUT_OFFLINE`    | `put` request saved locally. Currently offline.    |\n| `DELETE_FAILED`  | `delete` request has failed.                       |\n| `DELETE_STARTED` | `delete` request has started.                      |\n| `DELETE_SUCCESS` | `delete` request has succeed.                      |\n| `DELETE_OFFLINE` | `delete` request saved locally. Currently offline. |\n| `DETECT_ONLINE`  | Detected internet connection is available.         |\n| `DETECT_OFFLINE` | Detected internet connection is lost.              |\n\n#### Props\n\nThe `useMoxie` hook provides a handful of useful props:\n\n```jsx\nconst {\n\tactions,\n\tdata,\n\tdidInitialFetch,\n\thasData,\n\tisPending,\n\tpending,\n\tloading,\n} = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo',\n});\n```\n\n##### `actions`\n\nType: `object`\n\nActions contains a collection of RESTful actions you can perform on your Moxie collection:\n\n| Method                | Description                                                                                |\n| --------------------- | ------------------------------------------------------------------------------------------ |\n| `actions.get(id?)`    | Fetches your collection. Can fetch an individual entry if an `id` (`string`) is provided.  |\n| `actions.post(data)`  | Adds a new entry. The `data` argument needs to be an `object`.                             |\n| `actions.put(data)`   | Updates an entry. The `data` argument needs to be an `object` with an `id`.                |\n| `actions.patch(data)` | Updates an entry. The `data` argument needs to be an `object` with an `id`.                |\n| `actions.remove(id?)` | Removes your collection. Can remove an individual entry if an `id` (`string`) is provided. |\n\n##### `data`\n\nType: `Array`\n\nThe collection of your entries.\n\n##### `didInitialFetch`\n\nType: `boolean`\n\n`useMoxie` does an initial `GET` request for your collection on load. This property indicates whether that initial request has been performed. This is useful for rendering an initial loading UI.\n\n##### `hasData`\n\nType: `boolean`\n\nWhether your collection has entries.\n\n##### `isPending`\n\nType: `function(object|string)`\n\nChecks whether an entry is being processed. An entry is considered \"pending\" after an action is called, but before it is fully resolved from Moxie.\n\n###### Example:\n\n```js\n\u003cdiv key={entry.id}\u003e\n\t{entry.title}\n\t\u003cbr /\u003e\n\t{isPending(entry) ? 'Ready' : '...'}\n\u003c/div\u003e\n```\n\n##### `loading`\n\nType: `boolean`\n\n`useMoxie` toggles this property whenever an action is performed.\n\n##### `pending`\n\nType: `Array\u003cstring\u003e`\n\nAn array of entries (ids) that are currently being processed. An entry is considered \"pending\" after an action is called, but before it is fully resolved from Moxie.\n\n---\n\n### useMoxieState({ username, collection, initialState, actionReducer })\n\nUsed to manage state (`object`).\n\nNote: Updates (from `setState`) from the `useMoxieState` hook makes a network request to Moxie server. Avoid making rapid updates (e.g. update per keystroke).\n\n##### `username`\n\nType: `string`\n\nYour username for Moxie. It must start with an `@`. Example: `@itsjonq`.\n\n##### `collection`\n\nType: `string`\n\nThe name of the collection for your state data. If it doesn't exist under your Moxie username, Moxie will create it for you automatically when you add your first entry. Note: This collection should be different from your an existing Moxie / `useMoxie()` collection.\n\n##### `initialState`\n\nType: `Object`\n\nData to set as initial state. This state will be synced with Moxie on initial load.\n\n##### `actionReducer`\n\nType: `function`\n\nA callback function that dispatches events when `useMoxieState` performs API actions.\n\nExample:\n\n```jsx\nconst { state, setState, didInitialFetch, loading } = useMoxieState({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo-state',\n\tinitialState: { active: false },\n\tactionReducer: (type) =\u003e console.log(type),\n});\n```\n\n#### Props\n\nThe `useMoxieState` hook provides a handful of useful props:\n\n```jsx\nconst {\n\tstate,\n\tsetState,\n\tremoveState,\n\tdidInitialFetch,\n\thasData,\n\tisPending,\n\tpending,\n\tloading,\n} = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo-state',\n});\n```\n\nMany of these props are the same from the `useMoxie` hook.\n\n##### `state`\n\nType: `object`\n\nThe state.\n\n```jsx\nconst { state, setState } = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo-state',\n\tinitialState: {\n\t\tactive: false,\n\t},\n});\n\nconsole.log(state);\n// { active: false }\n```\n\n##### `setState`\n\nType: `function`\n\nMethod used to update state. `setState` updates the state both locally and on Moxie.\n\n```jsx\nconst { state, setState } = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo-state',\n\tinitialState: {\n\t\tactive: false,\n\t},\n});\n\nconsole.log(state);\n// { active: false }\n\nsetState({ active: true });\n\nconsole.log(state);\n// { active: true }\n```\n\n##### `removeState`\n\nType: `function`\n\nMethod used to remove state. Use this if you need to reset this.\n\n```jsx\nconst { state, removeState } = useMoxie({\n\tusername: '@itsjonq',\n\tcollection: 'use-moxie-demo-state',\n\tinitialState: {\n\t\tactive: false,\n\t},\n});\n\nconsole.log(state);\n// { active: false }\n\nremoveState();\n\nconsole.log(state);\n// {}\n```\n\n## Example\n\nCheck out our [simple example](https://codesandbox.io/s/use-moxie-demo-u3erf?file=/src/App.js).\n\n## Offline Support\n\n`useMoxie` has some basic offline support. It will save actions to `localStorage` while you are offline. Once you're back online, it will try to synchronize the offline modifications.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fuse-moxie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fuse-moxie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fuse-moxie/lists"}