Wayfinder React
A set of React hooks and components for integrating Wayfinder, the decentralized data access system for Arweave.
Wayfinder-react wraps the functionality of wayfinder-core in user-friendly React components and hooks, making it easy to integrate AR.IO network functionality into your React applications with built-in loading states, error handling, and caching.
Quick Start
Install Wayfinder React
npm install @ar.io/wayfinder-react @ar.io/wayfinder-core @ar.io/sdkInstall polyfills (required for web environments)
Crypto polyfills are required for web environments due to the use of crypto, buffer and process types in wayfinder-react dependencies (i.e. arbundles).
npm install --save-dev vite-plugin-node-polyfills// vite.config.js
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
export default defineConfig({
plugins: [
nodePolyfills({
globals: {
Buffer: true,
global: true,
process: true,
},
}),
],
});Configure your bundler (Webpack, Vite, Rollup, etc.) to provide polyfills for crypto, process, and buffer. Refer to your bundler's documentation for polyfill configuration.
Setup the provider
// App.tsx
import { WayfinderProvider } from '@ar.io/wayfinder-react';
function App() {
return (
<WayfinderProvider>
<YourApp />
</WayfinderProvider>
);
}Use the available hooks
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} />
);
}Next Steps
Hooks Reference
Comprehensive guide to all available React hooks
Wayfinder Core
Learn about the underlying core library
How is this guide?