Skip to main content

React integration

To use the Polywrap React integration, you'll need to install the @web3api/react package.

npm install --save @web3api/react

An example React application can be found here.

Web3ApiProvider#

Once installed, the first step is to add the Web3ApiProvider to your DOM. This will instantiate an instance of the Web3ApiClient 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 { Web3ApiProvider } from '@web3api/react';
export const App: React.FC = () => {
return (
<Web3ApiProvider>
<HelloWorld />
</Web3ApiProvider>
);
};

Web3ApiProvider Props#

The Web3ApiProvider component's props are the same as the Web3ApiClient constructor's arguments. For example, you can configure redirects like so:

<Web3ApiProvider redirects={ [] }/>

Multiple Web3ApiProviders#

If you need to use multiple providers, you can do so using the createWeb3ApiProvider("...") method, which accepts the name of your provider as an argument. For example:

import { createWeb3ApiProvider } from '@web3api/react';
const CustomWeb3ApiProvider = createWeb3ApiProvider('custom');
export const CustomProvider = ({ children }: { children: JSX.Element }) => {
return (
<CustomWeb3ApiProvider>
{children}
</CustomWeb3ApiProvider>
);
};

useWeb3ApiQuery#

After enabling your React application with the Web3ApiProvider, you may now use the useWeb3ApiQuery hook to send Polywrap queries!

Here's what our "hello world" query from above would look like if we used this method.

const { execute, data, errors, loading } = useWeb3ApiQuery({
uri: 'ens/api.helloworld.polywrap.eth',
query: `{
logMessage(message: "Hello World!")
}`,
});
tip

By default, the useWeb3ApiQuery hook uses the first Web3ApiProvider 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, errors, loading } = useWeb3ApiQuery({
provider: "custom",
uri: 'ens/api.helloworld.polywrap.eth',
query: `{
logMessage(message: "Hello World!")
}`,
});

useWeb3ApiInvoke#

The useWeb3ApiInvoke hook works the same as the useWeb3ApiQuery hook, but uses the client's invoke syntax instead.

Here's what our "hello world" query from above would look like with useWeb3ApiInvoke.

const { execute, data, error, loading } = useWeb3ApiInvoke({
uri: 'ens/api.helloworld.polywrap.eth',
module: "query",
method: "logMessage",
input: {
message: "Hello World!",
},
});

useWeb3ApiClient#

You can obtain a copy of the client instance from your Web3ApiProvider using the useWeb3ApiClient hook.

const client = useWeb3ApiClient();