@polywrap/react

The purpose of the Polywrap React library is to simplify integration of Polywrap into React applications.

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!",
  },
});

tip

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!",
  },
});

usePolywrapQuery#

The usePolywrapQuery hook works the same as the usePolywrapInvoke hook, but uses the client's query syntax instead.

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