@ar.io/wayfinder-react 1.0.11 → 1.0.12

package/README.md

@@ -20,7 +20,9 @@ yarn add @ar.io/wayfinder-react @ar.io/wayfinder-core
 
 ## Usage
 
-```jsx
+### Initial Setup
+
+```tsx
 import {
   WayfinderProvider,
   useWayfinderRequest,
@@ -32,7 +34,7 @@ import {
 } from '@ar.io/wayfinder-core';
 import { ARIO } from '@ar.io/sdk';
 
-// Wrap your app with the provider
+// Wrap your app with the WayfinderProvider
 function App() {
   return (
     <WayfinderProvider
@@ -49,16 +51,54 @@ function App() {
     </WayfinderProvider>
   );
 }
+```
 
-// Use components
-function YourComponent() {
-  const txId = 'your-transaction-id'; // Replace with actual txId
-  
-  // Use custom hooks for URL resolution and data fetching
-  const request = useWayfinderRequest();
-  const { resolvedUrl, isLoading: urlLoading, error: urlError } = useWayfinderUrl({ txId });
+### Hooks
+
+### useWayfinderUrl
+
+Get a dynamic URL for an existing `ar://` URL or legacy `arweave.net`/`arweave.dev` URL.
+
+Example:
+
+```tsx
+import { useWayfinderUrl } from '@ar.io/wayfinder-react';
+
+function WayfinderImage({ txId }: { txId: string }) {
+  const { resolvedUrl, isLoading, error } = useWayfinderUrl({ txId });
+
+  if (error) {
+    return <p>Error resolving URL: {error.message}</p>;
+  }
+
+  if (isLoading) {
+    return <p>Resolving URL...</p>;
+  }
+
+  return (
+    <img src={resolvedUrl} alt={txId} />
+  );
+}
+```
+
+#### useWayfinderRequest
 
-  // Use custom hooks for data fetching
+Fetch the data via wayfinder, and optionally verify the data.
+
+```tsx
+import {
+  WayfinderProvider,
+  useWayfinderRequest,
+  useWayfinderUrl,
+} from '@ar.io/wayfinder-react';
+import {
+  NetworkGatewaysProvider,
+  LocalStorageGatewaysProvider,
+} from '@ar.io/wayfinder-core';
+import { ARIO } from '@ar.io/sdk';
+
+function WayfinderData({ txId }: { txId: string }) {
+  const request = useWayfinderRequest();
   const [data, setData] = useState<any>(null);
   const [dataLoading, setDataLoading] = useState(false);
   const [dataError, setDataError] = useState<Error | null>(null);
@@ -85,14 +125,20 @@ function YourComponent() {
     })();
   }, [request, txId]);
 
+  if (dataError) {
+    return <p>Error loading data: {dataError.message}</p>;
+  }
+
+  if (dataLoading) {
+    return <p>Loading data...</p>;
+  }
+
+  if (!data) {
+    return <p>No data</p>;
+  }
+
   return (
     <div>
-      {urlLoading && <p>Resolving URL...</p>}
-      {urlError && <p>Error resolving URL: {urlError.message}</p>}
-      {resolvedUrl && <a href={resolvedUrl}>View on WayFinder</a>}
-      <br />
-      {dataLoading && <p>Loading data...</p>}
-      {dataError && <p>Error loading data: {dataError.message}</p>}
       <pre>{data}</pre>
     </div>
   );

package/dist/version.d.ts

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const WAYFINDER_REACT_VERSION = "v1.0.11";
+export declare const WAYFINDER_REACT_VERSION = "v1.0.12";

package/dist/version.js

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const WAYFINDER_REACT_VERSION = 'v1.0.11';
+export const WAYFINDER_REACT_VERSION = 'v1.0.12';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ar.io/wayfinder-react",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "React components for WayFinder",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "format:check": "biome format --config-path=../../biome.json"
   },
   "dependencies": {
-    "@ar.io/wayfinder-core": "1.2.0",
+    "@ar.io/wayfinder-core": "1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },