@rango-dev/queue-manager-react 0.0.0-experimental-936229e8-20251208

package/CHANGELOG.md

@@ -0,0 +1,106 @@
+# [0.33.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.32.0...queue-manager-react@0.33.0) (2025-10-29)
+
+
+
+# [0.32.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.31.0...queue-manager-react@0.32.0) (2025-08-05)
+
+
+
+# [0.31.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.30.0...queue-manager-react@0.31.0) (2025-07-22)
+
+
+### Reverts
+
+* Revert "chore(release): publish" ([064ce15](https://github.com/rango-exchange/rango-client/commit/064ce157a2f819856f647f83aeb1c0410542e8d7))
+
+
+
+# [0.29.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.28.0...queue-manager-react@0.29.0) (2025-03-11)
+
+
+
+# [0.28.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.27.0...queue-manager-react@0.28.0) (2025-02-23)
+
+
+
+# [0.27.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.26.0...queue-manager-react@0.27.0) (2024-08-11)
+
+
+
+# [0.26.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.25.0...queue-manager-react@0.26.0) (2024-02-20)
+
+
+
+# [0.25.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.24.0...queue-manager-react@0.25.0) (2024-01-22)
+
+
+### Features
+
+* handle active tab in widget-embedded ([427a3bb](https://github.com/rango-exchange/rango-client/commit/427a3bb42dcaf899c4241aa5bd60c15a3475882a))
+
+
+
+# [0.24.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.23.0...queue-manager-react@0.24.0) (2023-12-24)
+
+
+### Bug Fixes
+
+* fix HMR for widget and playground ([8524820](https://github.com/rango-exchange/rango-client/commit/8524820f10cf0b8921f3db0c4f620ff98daa4103))
+
+
+
+# [0.14.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.13.0...queue-manager-react@0.14.0) (2023-08-03)
+
+
+
+# [0.13.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.12.0...queue-manager-react@0.13.0) (2023-08-01)
+
+
+
+# [0.9.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.8.0...queue-manager-react@0.9.0) (2023-07-31)
+
+
+### Bug Fixes
+
+* seems npm needs a bit time to update the cdn and return the correct version ([09168ac](https://github.com/rango-exchange/rango-client/commit/09168acdc3ca400abd2016eebc0c62103edae3a2))
+
+
+### Features
+
+* Support for WalletConnect 2 ([faedef0](https://github.com/rango-exchange/rango-client/commit/faedef0b5e6fc3c5ef881cbbe4ec05334cc1c910))
+
+
+
+# [0.7.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.6.0...queue-manager-react@0.7.0) (2023-07-11)
+
+
+
+# [0.6.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.5.0...queue-manager-react@0.6.0) (2023-07-11)
+
+
+
+# [0.5.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.4.0...queue-manager-react@0.5.0) (2023-05-31)
+
+
+
+# [0.4.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.3.0...queue-manager-react@0.4.0) (2023-05-31)
+
+
+
+# [0.3.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.2.0...queue-manager-react@0.3.0) (2023-05-30)
+
+
+
+# [0.2.0](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.1.13...queue-manager-react@0.2.0) (2023-05-30)
+
+
+
+## [0.1.12](https://github.com/rango-exchange/rango-client/compare/queue-manager-react@0.1.11...queue-manager-react@0.1.12) (2023-05-15)
+
+
+### Bug Fixes
+
+* fix type inconsistency in queue-manager-react Provider props ([1c2d484](https://github.com/rango-exchange/rango-client/commit/1c2d484dd251628791d39c45be97058f38bc02e7))
+
+
+

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Provider, useManager } from './provider';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+var c=Object.defineProperty;var a=(e,t)=>c(e,"name",{value:t,configurable:!0});import{Manager as P}from"@rango-dev/queue-manager-core";import M,{createContext as x,useContext as y,useEffect as p,useLayoutEffect as l,useMemo as S,useRef as T,useState as v}from"react";import{useReducer as g}from"react";var s={loadedFromPersistor:!1};function m(e,t){switch(t.type){case"UPDATE":return{...e,[t.name]:t.value};default:return e}}a(m,"reducer");function d(){let[e,t]=g(m,s);return{state:e,update:(n,r)=>{t({type:"UPDATE",name:n,value:r})}}}a(d,"useManagerState");var i=x({manager:void 0,state:s});function C(e){let[,t]=v({}),{state:n,update:r}=d(),u=T(e.context),o=S(()=>new P({queuesDefs:e.queuesDefs,events:{onStorageUpdate:()=>{t({})},onCreateQueue:()=>{t({})},onCreateTask:()=>{t({})},onUpdateQueue:()=>{t({})},onUpdateTask:()=>{t({})},onPersistedDataLoaded:f=>{t({}),e.onPersistedDataLoaded&&e.onPersistedDataLoaded(f),n.loadedFromPersistor||r("loadedFromPersistor",!0)},onTaskBlock:()=>{t({})},onDeleteQueue:()=>{t({})}},context:u||{},isPaused:e.isPaused}),[]);return l(()=>{u.current=e.context},[e.context]),p(()=>{typeof e.isPaused<"u"&&(e.isPaused?o.pause():o.run(),t({}))},[e.isPaused]),M.createElement(i.Provider,{value:{manager:o,state:n}},e.children)}a(C,"Provider");function D(){let e=y(i);if(!e)throw Error("useManager can only be used within the Provider component");return e}a(D,"useManager");var h=C;export{h as Provider,D as useManager};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/provider.tsx", "../src/state.ts"],
+  "sourcesContent": ["import type { ManagerContext, ManagerState } from './types';\nimport type {\n  ManagerContext as Context,\n  Events,\n  QueueDef,\n} from '@rango-dev/queue-manager-core';\nimport type { PropsWithChildren } from 'react';\n\nimport { Manager } from '@rango-dev/queue-manager-core';\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { initState as initManagerState, useManagerState } from './state';\n\nconst ManagerCtx = createContext<{\n  manager: ManagerContext;\n  state: ManagerState;\n}>({\n  manager: undefined,\n  state: initManagerState,\n});\n\ninterface PropTypes {\n  queuesDefs: QueueDef<any, any, any>[];\n  context: Context;\n  onPersistedDataLoaded?: Events['onPersistedDataLoaded'];\n  isPaused?: boolean;\n}\n\nfunction Provider(props: PropsWithChildren<PropTypes>) {\n  // TODO: this is not a proper way but i don't want to change the context interface atm.\n  const [, forceRender] = useState({});\n  const { state, update } = useManagerState();\n  const context = useRef(props.context);\n\n  const manager = useMemo<Manager>(() => {\n    return new Manager({\n      queuesDefs: props.queuesDefs,\n      events: {\n        onStorageUpdate: () => {\n          forceRender({});\n        },\n        onCreateQueue: () => {\n          forceRender({});\n        },\n        onCreateTask: () => {\n          forceRender({});\n        },\n        onUpdateQueue: () => {\n          forceRender({});\n        },\n        onUpdateTask: () => {\n          forceRender({});\n        },\n        onPersistedDataLoaded: (manager) => {\n          forceRender({});\n\n          if (props.onPersistedDataLoaded) {\n            props.onPersistedDataLoaded(manager);\n          }\n\n          /*\n           * This condition will make sure, we only update the `loadedFromPersistor`.\n           * But be aware `onPersistedDataLoaded` is calling after each `sync` which means can be called multiple times.\n           */\n          if (!state.loadedFromPersistor) {\n            update('loadedFromPersistor', true);\n          }\n        },\n        onTaskBlock: () => {\n          forceRender({});\n        },\n        onDeleteQueue: () => {\n          forceRender({});\n        },\n      },\n      context: context || {},\n      isPaused: props.isPaused,\n    });\n  }, []);\n\n  useLayoutEffect(() => {\n    context.current = props.context;\n  }, [props.context]);\n\n  useEffect(() => {\n    if (typeof props.isPaused !== 'undefined') {\n      if (props.isPaused) {\n        manager.pause();\n      } else {\n        manager.run();\n      }\n      forceRender({});\n    }\n  }, [props.isPaused]);\n\n  return (\n    // eslint-disable-next-line react/jsx-no-constructed-context-values\n    <ManagerCtx.Provider value={{ manager, state }}>\n      {props.children}\n    </ManagerCtx.Provider>\n  );\n}\n\nexport function useManager(): { manager: ManagerContext; state: ManagerState } {\n  const context = useContext(ManagerCtx);\n  if (!context) {\n    throw Error('useManager can only be used within the Provider component');\n  }\n  return context;\n}\n\nexport default Provider;\n", "import { useReducer } from 'react';\nimport { ManagerState } from './types';\n\ntype Update<T> = (name: keyof T, value: T[keyof T]) => void;\ntype Action<T> = { type: 'UPDATE'; name: keyof T; value: T[keyof T] };\n\nexport const initState: ManagerState = {\n  loadedFromPersistor: false,\n};\n\nfunction reducer(state: ManagerState, action: Action<ManagerState>) {\n  switch (action.type) {\n    case 'UPDATE':\n      return { ...state, [action.name]: action.value };\n    default:\n      return state;\n  }\n}\n\nexport function useManagerState(): {\n  state: ManagerState;\n  update: Update<ManagerState>;\n} {\n  const [state, dispatch] = useReducer(reducer, initState);\n\n  return {\n    state,\n    update: (name, value) => {\n      dispatch({\n        type: 'UPDATE',\n        name,\n        value,\n      });\n    },\n  };\n}\n"],
+  "mappings": "+EAQA,OAAS,WAAAA,MAAe,gCACxB,OAAOC,GACL,iBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,mBAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,MACK,QCjBP,OAAS,cAAAC,MAAkB,QAMpB,IAAMC,EAA0B,CACrC,oBAAqB,EACvB,EAEA,SAASC,EAAQC,EAAqBC,EAA8B,CAClE,OAAQA,EAAO,KAAM,CACnB,IAAK,SACH,MAAO,CAAE,GAAGD,EAAO,CAACC,EAAO,IAAI,EAAGA,EAAO,KAAM,EACjD,QACE,OAAOD,CACX,CACF,CAPSE,EAAAH,EAAA,WASF,SAASI,GAGd,CACA,GAAM,CAACH,EAAOI,CAAQ,EAAIC,EAAWN,EAASD,CAAS,EAEvD,MAAO,CACL,MAAAE,EACA,OAAQ,CAACM,EAAMC,IAAU,CACvBH,EAAS,CACP,KAAM,SACN,KAAAE,EACA,MAAAC,CACF,CAAC,CACH,CACF,CACF,CAhBgBL,EAAAC,EAAA,mBDEhB,IAAMK,EAAaC,EAGhB,CACD,QAAS,OACT,MAAOC,CACT,CAAC,EASD,SAASC,EAASC,EAAqC,CAErD,GAAM,CAAC,CAAEC,CAAW,EAAIC,EAAS,CAAC,CAAC,EAC7B,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIC,EAAgB,EACpCC,EAAUC,EAAOP,EAAM,OAAO,EAE9BQ,EAAUC,EAAiB,IACxB,IAAIC,EAAQ,CACjB,WAAYV,EAAM,WAClB,OAAQ,CACN,gBAAiB,IAAM,CACrBC,EAAY,CAAC,CAAC,CAChB,EACA,cAAe,IAAM,CACnBA,EAAY,CAAC,CAAC,CAChB,EACA,aAAc,IAAM,CAClBA,EAAY,CAAC,CAAC,CAChB,EACA,cAAe,IAAM,CACnBA,EAAY,CAAC,CAAC,CAChB,EACA,aAAc,IAAM,CAClBA,EAAY,CAAC,CAAC,CAChB,EACA,sBAAwBO,GAAY,CAClCP,EAAY,CAAC,CAAC,EAEVD,EAAM,uBACRA,EAAM,sBAAsBQ,CAAO,EAOhCL,EAAM,qBACTC,EAAO,sBAAuB,EAAI,CAEtC,EACA,YAAa,IAAM,CACjBH,EAAY,CAAC,CAAC,CAChB,EACA,cAAe,IAAM,CACnBA,EAAY,CAAC,CAAC,CAChB,CACF,EACA,QAASK,GAAW,CAAC,EACrB,SAAUN,EAAM,QAClB,CAAC,EACA,CAAC,CAAC,EAEL,OAAAW,EAAgB,IAAM,CACpBL,EAAQ,QAAUN,EAAM,OAC1B,EAAG,CAACA,EAAM,OAAO,CAAC,EAElBY,EAAU,IAAM,CACV,OAAOZ,EAAM,SAAa,MACxBA,EAAM,SACRQ,EAAQ,MAAM,EAEdA,EAAQ,IAAI,EAEdP,EAAY,CAAC,CAAC,EAElB,EAAG,CAACD,EAAM,QAAQ,CAAC,EAIjBa,EAAA,cAACjB,EAAW,SAAX,CAAoB,MAAO,CAAE,QAAAY,EAAS,MAAAL,CAAM,GAC1CH,EAAM,QACT,CAEJ,CAzESc,EAAAf,EAAA,YA2EF,SAASgB,GAA+D,CAC7E,IAAMT,EAAUU,EAAWpB,CAAU,EACrC,GAAI,CAACU,EACH,MAAM,MAAM,2DAA2D,EAEzE,OAAOA,CACT,CANgBQ,EAAAC,EAAA,cAQhB,IAAOE,EAAQlB",
+  "names": ["Manager", "React", "createContext", "useContext", "useEffect", "useLayoutEffect", "useMemo", "useRef", "useState", "useReducer", "initState", "reducer", "state", "action", "__name", "useManagerState", "dispatch", "useReducer", "name", "value", "ManagerCtx", "createContext", "initState", "Provider", "props", "forceRender", "useState", "state", "update", "useManagerState", "context", "useRef", "manager", "useMemo", "Manager", "useLayoutEffect", "useEffect", "React", "__name", "useManager", "useContext", "provider_default"]
+}

package/dist/provider.d.ts

@@ -0,0 +1,17 @@
+import type { ManagerContext, ManagerState } from './types';
+import type { ManagerContext as Context, Events, QueueDef } from '@rango-dev/queue-manager-core';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+interface PropTypes {
+    queuesDefs: QueueDef<any, any, any>[];
+    context: Context;
+    onPersistedDataLoaded?: Events['onPersistedDataLoaded'];
+    isPaused?: boolean;
+}
+declare function Provider(props: PropsWithChildren<PropTypes>): React.JSX.Element;
+export declare function useManager(): {
+    manager: ManagerContext;
+    state: ManagerState;
+};
+export default Provider;
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,KAAK,EACV,cAAc,IAAI,OAAO,EACzB,MAAM,EACN,QAAQ,EACT,MAAM,+BAA+B,CAAC;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAQN,MAAM,OAAO,CAAC;AAYf,UAAU,SAAS;IACjB,UAAU,EAAE,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,qBAAqB,CAAC,EAAE,MAAM,CAAC,uBAAuB,CAAC,CAAC;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAyEpD;AAED,wBAAgB,UAAU,IAAI;IAAE,OAAO,EAAE,cAAc,CAAC;IAAC,KAAK,EAAE,YAAY,CAAA;CAAE,CAM7E;AAED,eAAe,QAAQ,CAAC"}

package/dist/queue-manager-react.build.json

@@ -0,0 +1 @@
+{"inputs":{"src/state.ts":{"bytes":799,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"./types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/provider.tsx":{"bytes":3058,"imports":[{"path":"@rango-dev/queue-manager-core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/state.ts","kind":"import-statement","original":"./state"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":62,"imports":[{"path":"src/provider.tsx","kind":"import-statement","original":"./provider"}],"format":"esm"}},"outputs":{"dist/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":6440},"dist/index.js":{"imports":[{"path":"@rango-dev/queue-manager-core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Provider","useManager"],"entryPoint":"src/index.ts","inputs":{"src/provider.tsx":{"bytesInOutput":1043},"src/state.ts":{"bytesInOutput":291},"src/index.ts":{"bytesInOutput":0}},"bytes":1486}}}

package/dist/state.d.ts

@@ -0,0 +1,9 @@
+import { ManagerState } from './types';
+type Update<T> = (name: keyof T, value: T[keyof T]) => void;
+export declare const initState: ManagerState;
+export declare function useManagerState(): {
+    state: ManagerState;
+    update: Update<ManagerState>;
+};
+export {};
+//# sourceMappingURL=state.d.ts.map

package/dist/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../src/state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI,CAAC;AAG5D,eAAO,MAAM,SAAS,EAAE,YAEvB,CAAC;AAWF,wBAAgB,eAAe,IAAI;IACjC,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC;CAC9B,CAaA"}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import type { Manager } from '@rango-dev/queue-manager-core';
+export type ManagerContext = Manager | undefined;
+export type ManagerState = {
+    loadedFromPersistor: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAE7D,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG;IACzB,mBAAmB,EAAE,OAAO,CAAC;CAC9B,CAAC"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@rango-dev/queue-manager-react",
+  "version": "0.0.0-experimental-936229e8-20251208",
+  "license": "MIT",
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build/command.mjs --path queue-manager/react",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
+    "clean": "rimraf dist",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "peerDependencies": {
+    "@rango-dev/queue-manager-core": "*",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1 @@
+# @rango-dev/queue-manager-react

package/src/index.ts

@@ -0,0 +1 @@
+export { default as Provider, useManager } from './provider';

package/src/provider.tsx

@@ -0,0 +1,120 @@
+import type { ManagerContext, ManagerState } from './types';
+import type {
+  ManagerContext as Context,
+  Events,
+  QueueDef,
+} from '@rango-dev/queue-manager-core';
+import type { PropsWithChildren } from 'react';
+
+import { Manager } from '@rango-dev/queue-manager-core';
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { initState as initManagerState, useManagerState } from './state';
+
+const ManagerCtx = createContext<{
+  manager: ManagerContext;
+  state: ManagerState;
+}>({
+  manager: undefined,
+  state: initManagerState,
+});
+
+interface PropTypes {
+  queuesDefs: QueueDef<any, any, any>[];
+  context: Context;
+  onPersistedDataLoaded?: Events['onPersistedDataLoaded'];
+  isPaused?: boolean;
+}
+
+function Provider(props: PropsWithChildren<PropTypes>) {
+  // TODO: this is not a proper way but i don't want to change the context interface atm.
+  const [, forceRender] = useState({});
+  const { state, update } = useManagerState();
+  const context = useRef(props.context);
+
+  const manager = useMemo<Manager>(() => {
+    return new Manager({
+      queuesDefs: props.queuesDefs,
+      events: {
+        onStorageUpdate: () => {
+          forceRender({});
+        },
+        onCreateQueue: () => {
+          forceRender({});
+        },
+        onCreateTask: () => {
+          forceRender({});
+        },
+        onUpdateQueue: () => {
+          forceRender({});
+        },
+        onUpdateTask: () => {
+          forceRender({});
+        },
+        onPersistedDataLoaded: (manager) => {
+          forceRender({});
+
+          if (props.onPersistedDataLoaded) {
+            props.onPersistedDataLoaded(manager);
+          }
+
+          /*
+           * This condition will make sure, we only update the `loadedFromPersistor`.
+           * But be aware `onPersistedDataLoaded` is calling after each `sync` which means can be called multiple times.
+           */
+          if (!state.loadedFromPersistor) {
+            update('loadedFromPersistor', true);
+          }
+        },
+        onTaskBlock: () => {
+          forceRender({});
+        },
+        onDeleteQueue: () => {
+          forceRender({});
+        },
+      },
+      context: context || {},
+      isPaused: props.isPaused,
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    context.current = props.context;
+  }, [props.context]);
+
+  useEffect(() => {
+    if (typeof props.isPaused !== 'undefined') {
+      if (props.isPaused) {
+        manager.pause();
+      } else {
+        manager.run();
+      }
+      forceRender({});
+    }
+  }, [props.isPaused]);
+
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    <ManagerCtx.Provider value={{ manager, state }}>
+      {props.children}
+    </ManagerCtx.Provider>
+  );
+}
+
+export function useManager(): { manager: ManagerContext; state: ManagerState } {
+  const context = useContext(ManagerCtx);
+  if (!context) {
+    throw Error('useManager can only be used within the Provider component');
+  }
+  return context;
+}
+
+export default Provider;

package/src/state.ts

@@ -0,0 +1,36 @@
+import { useReducer } from 'react';
+import { ManagerState } from './types';
+
+type Update<T> = (name: keyof T, value: T[keyof T]) => void;
+type Action<T> = { type: 'UPDATE'; name: keyof T; value: T[keyof T] };
+
+export const initState: ManagerState = {
+  loadedFromPersistor: false,
+};
+
+function reducer(state: ManagerState, action: Action<ManagerState>) {
+  switch (action.type) {
+    case 'UPDATE':
+      return { ...state, [action.name]: action.value };
+    default:
+      return state;
+  }
+}
+
+export function useManagerState(): {
+  state: ManagerState;
+  update: Update<ManagerState>;
+} {
+  const [state, dispatch] = useReducer(reducer, initState);
+
+  return {
+    state,
+    update: (name, value) => {
+      dispatch({
+        type: 'UPDATE',
+        name,
+        value,
+      });
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,6 @@
+import type { Manager } from '@rango-dev/queue-manager-core';
+
+export type ManagerContext = Manager | undefined;
+export type ManagerState = {
+  loadedFromPersistor: boolean;
+};