@ic-reactor/react 0.0.1 → 0.0.2

package/README.md

@@ -26,52 +26,55 @@ yarn add @ic-reactor/react
 
 ## Usage
 
-To use `@ic-reactor/react`, start by importing and setting up the `createReActor` function with your actor configurations:
+Here's a simple example to get you started:
 
-```javascript
-import createReActor from '@ic-reactor/react';
+First, create an actor declaration file:
 
-const actorInitializer = /* Your actor initialization logic */;
-const reActorConfig = /* Your ReActor configuration options */;
+```js
+// store.js
+import { canisterId, createActor } from "declaration/actor"
+import { createReActor } from "@ic-reactor/core"
 
-const { ReActorProvider, useReActorQuery, useReActorUpdate, ... } = createReActor(actorInitializer, reActorConfig);
-```
-
-Then, wrap your React application with the `ReActorProvider` component:
-
-```javascript
-const App = () => (
-  <ReActorProvider>
-    <YourApp />
-  </ReActorProvider>
+export const { ReActorProvider, useQueryCall } = createReActor((agent) =>
+  createActor(canisterId, { agent })
 )
 ```
 
-Finally, use the `useReActorQuery` and `useReActorUpdate` hooks to query and update actor state:
+Wrap your app with the `ReActorProvider` component:
 
-### Example: Querying Actor State
+```jsx
+// App.jsx
 
-```javascript
-const { recall, data, loading, error } = useQueryCall({
-  functionName: "fetchData",
-  args: ["arg1", "arg2"],
-  autoRefresh: true, // default: true
-  refreshInterval: 3000, // default: 5000
-  disableInitialCall: false, // default: false
-})
-
-// Use 'data', 'loading', 'error' in your component
+<ReActorProvider>
+  <Balance principal={principal} />
+</ReActorProvider>
 ```
 
-### Example: Updating Actor State
-
-```javascript
-const { call, data, loading, error } = useUpdateCall({
-  functionName: "updateData",
-  args: ["arg1", "arg2"],
-})
-
-// Call the 'call' function to trigger an update call
+Then, use the `useQueryCall` hook to call your canister method:
+
+```jsx
+// Balance.jsx
+import { useQueryCall } from "./store"
+
+const Balance = ({ principal }) => {
+  const { recall, data, loading, error } = useQueryCall({
+    functionName: "get_balance",
+    args: [principal],
+  })
+
+  return (
+    <div>
+      <button onClick={() => recall()} disabled={loading}>
+        {loading ? "Loading..." : "Refresh"}
+      </button>
+      {loading && <p>Loading...</p>}
+      {data && <p>Balance: {data}</p>}
+      {error && <p>Error: {error}</p>}
+    </div>
+  )
+}
+
+export default Balance
 ```
 
 ## API Reference

package/dist/index.js

@@ -18,7 +18,7 @@ const react_1 = require("react");
 const hooks_1 = require("./hooks");
 const defaultCreateReActorOptions = {
     initializeOnMount: true,
-    host: process.env.NODE_ENV === "production"
+    host: process.env.NODE_ENV === "production" || process.env.DFX_NETWORK === "ic"
         ? "https://icp-api.io"
         : "http://localhost:4943",
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A React library for interacting with Dfinity actors",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -48,5 +48,5 @@
     "@peculiar/webcrypto": "1.4",
     "react": ">=16.8"
   },
-  "gitHead": "b1f673a150b591ad3cfbb8964794e4ea9b0ff1c2"
+  "gitHead": "948a6c0c4e176064907dc7e460033859d9d8090c"
 }