React integration

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

npm install --save @polywrap/react

An example React application can be found here.

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 wraps!

const { execute, data, error, loading } = usePolywrapInvoke({
  uri: 'ens/wraps.eth:logging@1.0.0',
  method: "info",
  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/wraps.eth:logging@1.0.0',
  method: "info",
  args: {
    message: "Hello World!",
  },
});