https://github.com/polywrap/react
A React library that simplifies the integration of Polywrap wrappers into React applications
https://github.com/polywrap/react
Last synced: 2 months ago
JSON representation
A React library that simplifies the integration of Polywrap wrappers into React applications
- Host: GitHub
- URL: https://github.com/polywrap/react
- Owner: polywrap
- License: mit
- Created: 2022-12-19T15:21:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-18T07:32:02.000Z (almost 3 years ago)
- Last Synced: 2025-02-03T14:06:22.227Z (over 1 year ago)
- Language: TypeScript
- Size: 1.01 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# @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
```bash
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:
```jsx
import React from 'react';
import { PolywrapProvider } from '@polywrap/react';
export const App: React.FC = () => {
return (
);
};
```
#### **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:
```jsx
```
#### **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:
```jsx
import { createPolywrapProvider } from '@polywrap/react';
const CustomPolywrapProvider = createPolywrapProvider('custom');
export const CustomProvider = ({ children }: { children: JSX.Element }) => {
return (
{children}
);
};
```
### **usePolywrapClient**
You can obtain a copy of the client instance from your `PolywrapProvider` using the `usePolywrapClient` hook.
```jsx
const client = usePolywrapClient();
```
### **usePolywrapInvoke**
After enabling your React application with the PolywrapProvider, you may now use the `usePolywrapInvoke` hook to call into wrappers!
```jsx
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:
```jsx
const { execute, data, error, loading } = usePolywrapInvoke({
provider: "custom",
uri: 'ens/helloworld.polytest.eth',
method: "logMessage",
args: {
message: "Hello World!",
},
});
```