@polywrap/react
A React library that simplifies the integration of Polywrap wrappers into React applications. Instantiates the Polywrap Client, send WRAP invocations, and renders the results.
Documentation
https://docs.polywrap.io/reference/clients/js/libraries/react
Installation
npm install @polywrap/react
Usage
PolywrapProvider
Once installed, the first step is to add the PolywrapProvider
to your DOM. This will instantiate an instance of the PolywrapClient
for all queries within the nested DOM hierarchy to use.
To use the provider, simply wrap it around whatever DOM hierarchy you'd like to use Polywrap within:
import React from 'react';
import { PolywrapProvider } from '@polywrap/react';
export const App: React.FC = () => {
return (
<PolywrapProvider>
<HelloWorld />
</PolywrapProvider>
);
};
PolywrapProvider Props
The PolywrapProvider
component's props are the same as the PolywrapClient
constructor's arguments. For example, you can configure URI redirects like so:
<PolywrapProvider redirects={ [] }/>
Multiple PolywrapProviders
If you need to use multiple providers, you can do so using the createPolywrapProvider("...")
method, which accepts the name of your provider as an argument. For example:
import { createPolywrapProvider } from '@polywrap/react';
const CustomPolywrapProvider = createPolywrapProvider('custom');
export const CustomProvider = ({ children }: { children: JSX.Element }) => {
return (
<CustomPolywrapProvider>
{children}
</CustomPolywrapProvider>
);
};
usePolywrapClient
You can obtain a copy of the client instance from your PolywrapProvider
using the usePolywrapClient
hook.
const client = usePolywrapClient();
usePolywrapInvoke
After enabling your React application with the PolywrapProvider, you may now use the usePolywrapInvoke
hook to call into wrappers!
const { execute, data, error, loading } = usePolywrapInvoke({
uri: 'ens/helloworld.polytest.eth',
method: "logMessage",
args: {
message: "Hello World!",
},
});
By default, the usePolywrapInvoke
hook uses the first PolywrapProvider found in the DOM's hierarchy. If you'd like to specify a specific provider to be used, simply set the provider:
property:
const { execute, data, error, loading } = usePolywrapInvoke({
provider: "custom",
uri: 'ens/helloworld.polytest.eth',
method: "logMessage",
args: {
message: "Hello World!",
},
});