mirror of
https://github.com/logos-messaging/docs.waku.org.git
synced 2026-01-02 12:53:12 +00:00
@waku/react docs (#90)
* add @waku/react outline * add @waku/react hooks docs * add @waku/react providers docs * add more snippet comments + fix code indents
This commit is contained in:
LordGhostX
GitHub
parent
435720f0ba
commit
627f7f8a8c
10
.cspell.json
10
.cspell.json
@ -6,11 +6,9 @@
|
||||
"linkability",
|
||||
"Unlinkability",
|
||||
"waku",
|
||||
"deplatforming",
|
||||
"gossipsub",
|
||||
"incentivized",
|
||||
"incentivizing",
|
||||
"XMTP",
|
||||
"RAILGUN",
|
||||
"nwaku",
|
||||
"deanonymization",
|
||||
@ -23,9 +21,7 @@
|
||||
"proto",
|
||||
"multiaddr",
|
||||
"multiaddrs",
|
||||
"Multiaddrs",
|
||||
"keyturn",
|
||||
"Comms",
|
||||
"Protobuf",
|
||||
"supercrypto",
|
||||
"QUIC",
|
||||
@ -47,11 +43,11 @@
|
||||
"myaddr",
|
||||
"extip",
|
||||
"staticnode",
|
||||
"permissioned",
|
||||
"Secp",
|
||||
"libpq",
|
||||
"dylib",
|
||||
"uncompromised",
|
||||
"reactjs",
|
||||
],
|
||||
"flagWords": [],
|
||||
"ignorePaths": [
|
||||
@ -76,7 +72,7 @@
|
||||
"pattern": "/wss:.*/"
|
||||
},
|
||||
{
|
||||
"name": "youtube-link",
|
||||
"name": "youtube",
|
||||
"pattern": "/< youtube.*/"
|
||||
},
|
||||
{
|
||||
@ -84,5 +80,5 @@
|
||||
"pattern": "/enr:-.*/"
|
||||
}
|
||||
],
|
||||
"ignoreRegExpList": ["multiaddr", "dnsMultiaddr", "wss", "youtube-link", "enrUri"]
|
||||
"ignoreRegExpList": ["multiaddr", "dnsMultiaddr", "wss", "youtube", "enrUri"]
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ import * as waku from "https://unpkg.com/@waku/sdk@latest/bundle/index.js";
|
||||
|
||||
## Getting Started
|
||||
|
||||
Check out the [quick start](/guides/js-waku/quick-start) guide and comprehensive tutorials to learn how to build applications with `js-waku`.
|
||||
Check out the quick start guide and comprehensive tutorials to learn how to build applications using `js-waku`:
|
||||
|
||||
| Guide | Description |
|
||||
| - | - |
|
||||
@ -46,7 +46,8 @@ Check out the [quick start](/guides/js-waku/quick-start) guide and comprehensive
|
||||
| [Send and Receive Messages Using Relay](/guides/js-waku/relay-send-receive) | Learn how to set up a Waku node for sending and receiving messages using the [Relay](/overview/concepts/protocols#relay) protocol |
|
||||
| [Send and Receive Messages Using Light Push and Filter](/guides/js-waku/light-send-receive) | Learn how to send and receive messages on light nodes using the [Light Push](/overview/concepts/protocols#light-push) and [Filter](/overview/concepts/protocols#filter) protocols |
|
||||
| [Retrieve Messages Using Store](/guides/js-waku/store-retrieve-messages) | Learn how to retrieve and filter historical messages on light nodes using the [Store](/overview/concepts/protocols#store) protocol |
|
||||
| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `js-waku` project from various example templates |
|
||||
| [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) | Learn how to use the [@waku/react](https://www.npmjs.com/package/@waku/react) package seamlessly integrate `js-waku` into a React application |
|
||||
| [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) | Learn how to use the [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) package to bootstrap your next `js-waku` project from various example templates |
|
||||
|
||||
## Get Help and Report Issues
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ title: Send and Receive Messages Using Light Push and Filter
|
||||
|
||||
This guide provides detailed steps to create a light node, send messages using the [Light Push protocol](/overview/concepts/protocols#light-push), and receive messages using the [Filter protocol](/overview/concepts/protocols#filter).
|
||||
|
||||
## Create a Waku Node
|
||||
## Create a Light Node
|
||||
|
||||
Set up a Waku node by creating a light node, connecting to network peers with `Light Push` and `Filter` enabled, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/):
|
||||
|
||||
@ -14,7 +14,7 @@ import {
|
||||
waitForRemotePeer,
|
||||
Protocols,
|
||||
createEncoder,
|
||||
createDecoder
|
||||
createDecoder,
|
||||
} from "@waku/sdk";
|
||||
|
||||
// Create and start a light node
|
||||
@ -23,8 +23,8 @@ await node.start();
|
||||
|
||||
// Wait for a successful peer connection
|
||||
await waitForRemotePeer(node, [
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
]);
|
||||
|
||||
// Choose a content topic
|
||||
@ -44,13 +44,13 @@ import protobuf from "protobufjs";
|
||||
|
||||
// Create a message structure using Protobuf
|
||||
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("sender", 2, "string"))
|
||||
.add(new protobuf.Field("message", 3, "string"));
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("sender", 2, "string"))
|
||||
.add(new protobuf.Field("message", 3, "string"));
|
||||
```
|
||||
|
||||
:::info
|
||||
Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for steps on adding the `protobufjs` package to your project.
|
||||
Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for adding the `protobufjs` package to your project.
|
||||
:::
|
||||
|
||||
## Send Messages Using Light Push
|
||||
@ -76,22 +76,25 @@ await node.lightPush.send(encoder, {
|
||||
|
||||
## Receive Messages Using Filter
|
||||
|
||||
Use the `filter.subscribe()` function to listen for incoming messages on a specific content topic:
|
||||
To receive messages using the `Filter` protocol, create a callback function to process the messages and use the `filter.subscribe()` function:
|
||||
|
||||
```js
|
||||
// Subscribe to content topics and display new messages
|
||||
const unsubscribe = await node.filter.subscribe([decoder], (wakuMessage) => {
|
||||
// Check if there is a payload on the message
|
||||
if (!wakuMessage.payload) return;
|
||||
// Render the messageObj as desired in your application
|
||||
// Create the callback function
|
||||
const callback = (wakuMessage) => {
|
||||
// Check if there is a payload on the message
|
||||
if (!wakuMessage.payload) return;
|
||||
// Render the messageObj as desired in your application
|
||||
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||
console.log(messageObj);
|
||||
});
|
||||
};
|
||||
|
||||
// Subscribe to content topics and display new messages
|
||||
const unsubscribe = await node.filter.subscribe([decoder], callback);
|
||||
|
||||
// Use the unsubscribe() function to stop receiving messages
|
||||
// await unsubscribe();
|
||||
```
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully sent and received messages over the Waku Network using the `Light Push` and `Filter` protocols.
|
||||
You have successfully sent and received messages over the Waku Network using the `Light Push` and `Filter` protocols. Check out the [light-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-js) and [light-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/light-chat) examples for working demos.
|
||||
:::
|
||||
@ -6,12 +6,12 @@ This guide provides quick steps to start using the `js-waku` SDK by setting up a
|
||||
|
||||
## Create a Relay Node
|
||||
|
||||
Use the `createRelayNode()` function to create a relay node and interact with the Waku Network:
|
||||
Use the `createRelayNode()` function to create a Relay Node and interact with the Waku Network:
|
||||
|
||||
```js
|
||||
import { createRelayNode } from "@waku/sdk";
|
||||
|
||||
// Create and start a relay node
|
||||
// Create and start a Relay Node
|
||||
const node = await createRelayNode({ defaultBootstrap: true });
|
||||
await node.start();
|
||||
|
||||
@ -20,7 +20,7 @@ await node.start();
|
||||
```
|
||||
|
||||
:::info
|
||||
The `defaultBootstrap` option bootstraps your node using [pre-defined Waku nodes](/overview/concepts/static-peers).
|
||||
When the `defaultBootstrap` flag is set to `true`, your node will be bootstrapped using [pre-defined Waku nodes](/overview/concepts/static-peers). The node does not connect to any remote peer or bootstrap node if omitted.
|
||||
:::
|
||||
|
||||
## Connect to Remote Peers
|
||||
@ -58,10 +58,17 @@ import { createEncoder } from "@waku/sdk";
|
||||
// Choose a content topic
|
||||
const contentTopic = "/quick-start/1/message/proto";
|
||||
|
||||
// Create a message encoder
|
||||
const encoder = createEncoder({ contentTopic });
|
||||
// Create a message encoder without encryption
|
||||
const encoder = createEncoder({
|
||||
contentTopic: contentTopic, // message content topic
|
||||
ephemeral: false, // allows messages to be stored or not
|
||||
});
|
||||
```
|
||||
|
||||
:::info
|
||||
When the `ephemeral` flag is set to `true`, your messages will not be stored by `Store` nodes.
|
||||
:::
|
||||
|
||||
## Create a Message Structure
|
||||
|
||||
Create a message structure for your application using [Protocol Buffers](https://protobuf.dev/) (`proto`) for the following reasons:
|
||||
@ -125,9 +132,9 @@ To send messages using the `Relay` protocol, create a new message object and use
|
||||
```js
|
||||
// Create a new message object
|
||||
const protoMessage = ChatMessage.create({
|
||||
timestamp: Date.now(),
|
||||
sender: "Alice",
|
||||
message: "Hello, World!",
|
||||
timestamp: Date.now(),
|
||||
sender: "Alice",
|
||||
message: "Hello, World!",
|
||||
});
|
||||
|
||||
// Serialize the message using Protobuf
|
||||
@ -135,10 +142,10 @@ const serializedMessage = ChatMessage.encode(protoMessage).finish();
|
||||
|
||||
// Send the message using Relay
|
||||
await node.relay.send(encoder, {
|
||||
payload: serializedMessage,
|
||||
payload: serializedMessage,
|
||||
});
|
||||
```
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully added decentralized communication features to your application using `js-waku`.
|
||||
You have successfully added decentralized communication features to your project using `js-waku`. To run your application smoothly, you can wrap these functions in JavaScript, React, or any other framework.
|
||||
:::
|
||||
@ -4,19 +4,19 @@ title: Send and Receive Messages Using Relay
|
||||
|
||||
This guide provides detailed steps to set up a Waku node for sending and receiving messages using the [Relay protocol](/overview/concepts/protocols#relay).
|
||||
|
||||
## Create a Waku Node
|
||||
## Create a Relay Node
|
||||
|
||||
Set up a Waku node by creating a relay node, connecting to network peers, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/):
|
||||
Set up a Waku node by creating a Relay Node, connecting to network peers, choosing a [content topic](/overview/concepts/content-topics), and creating an `encoder` and `decoder` for [message encryption](https://rfc.vac.dev/spec/26/):
|
||||
|
||||
```js
|
||||
import {
|
||||
createRelayNode,
|
||||
waitForRemotePeer,
|
||||
createEncoder,
|
||||
createDecoder
|
||||
createRelayNode,
|
||||
waitForRemotePeer,
|
||||
createEncoder,
|
||||
createDecoder,
|
||||
} from "@waku/sdk";
|
||||
|
||||
// Create and start a relay node
|
||||
// Create and start a Relay Node
|
||||
const node = await createRelayNode({
|
||||
defaultBootstrap: true, // bootstraps using pre-defined nodes
|
||||
emitSelf: true, // emits sent message events to itself
|
||||
@ -35,7 +35,7 @@ const decoder = createDecoder(contentTopic);
|
||||
```
|
||||
|
||||
:::info
|
||||
The `emitSelf` option emits sent message events to itself and invokes the node's subscribers.
|
||||
When the `emitSelf` flag is set to `true`, the node will emit sent message events to itself and invoke its subscribers.
|
||||
:::
|
||||
|
||||
## Create a Message Structure
|
||||
@ -47,13 +47,13 @@ import protobuf from "protobufjs";
|
||||
|
||||
// Create a message structure using Protobuf
|
||||
const ChatMessage = new protobuf.Type("ChatMessage")
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("sender", 2, "string"))
|
||||
.add(new protobuf.Field("message", 3, "string"));
|
||||
.add(new protobuf.Field("timestamp", 1, "uint64"))
|
||||
.add(new protobuf.Field("sender", 2, "string"))
|
||||
.add(new protobuf.Field("message", 3, "string"));
|
||||
```
|
||||
|
||||
:::info
|
||||
Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for steps on adding the `protobufjs` package to your project.
|
||||
Please refer to the [Protobuf installation](/guides/js-waku/quick-start#create-a-message-structure) guide for adding the `protobufjs` package to your project.
|
||||
:::
|
||||
|
||||
## Send Messages Using Relay
|
||||
@ -79,22 +79,25 @@ await node.relay.send(encoder, {
|
||||
|
||||
## Receive Messages Using Relay
|
||||
|
||||
Use the `relay.subscribe()` function to listen for incoming messages on a specific content topic:
|
||||
To receive messages using the `Relay` protocol, create a callback function to process the messages and use the `relay.subscribe()` function:
|
||||
|
||||
```js
|
||||
// Create the callback function
|
||||
const callback = (wakuMessage) => {
|
||||
// Check if there is a payload on the message
|
||||
if (!wakuMessage.payload) return;
|
||||
// Render the messageObj as desired in your application
|
||||
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||
console.log(messageObj);
|
||||
};
|
||||
|
||||
// Subscribe to content topics and display new messages
|
||||
const unsubscribe = await node.relay.subscribe([decoder], (wakuMessage) => {
|
||||
// Check if there is a payload on the message
|
||||
if (!wakuMessage.payload) return;
|
||||
// Render the messageObj as desired in your application
|
||||
const messageObj = ChatMessage.decode(wakuMessage.payload);
|
||||
console.log(messageObj);
|
||||
});
|
||||
const unsubscribe = await node.relay.subscribe([decoder], callback);
|
||||
|
||||
// Use the unsubscribe() function to stop receiving messages
|
||||
// await unsubscribe();
|
||||
```
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully sent and received messages over the Waku Network using the `Relay` protocol.
|
||||
You have successfully sent and received messages over the Waku Network using the `Relay` protocol. Check out the [relay-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-js), [relay-reactjs-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-reactjs-chat), and [relay-angular-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/relay-angular-chat) examples for working demos.
|
||||
:::
|
||||
@ -2,23 +2,23 @@
|
||||
title: Retrieve Messages Using Store
|
||||
---
|
||||
|
||||
This guide provides detailed steps to create a light node for retrieving and filtering historical messages using the [Store protocol](/overview/concepts/protocols#store).
|
||||
This guide provides detailed steps to create a Light Node for retrieving and filtering historical messages using the [Store protocol](/overview/concepts/protocols#store).
|
||||
|
||||
## Create a Light Node
|
||||
|
||||
Use the `createLightNode()` function to create a light node and interact with the Waku Network:
|
||||
Use the `createLightNode()` function to create a Light Node and interact with the Waku Network:
|
||||
|
||||
```js
|
||||
import { createLightNode } from "@waku/sdk";
|
||||
|
||||
// Create and start a light node
|
||||
// Create and start a Light Node
|
||||
const node = await createLightNode({ defaultBootstrap: true });
|
||||
await node.start();
|
||||
```
|
||||
|
||||
## Connect to Store Peers
|
||||
|
||||
Use the `waitForRemotePeer()` function to wait for the node to connect with store peers:
|
||||
Use the `waitForRemotePeer()` function to wait for the node to connect with Store peers:
|
||||
|
||||
```js
|
||||
import { waitForRemotePeer, Protocols } from "@waku/sdk";
|
||||
@ -57,7 +57,7 @@ The `store.queryOrderedCallback()` function provides a straightforward method fo
|
||||
// Create the callback function
|
||||
const callback = (wakuMessage) => {
|
||||
// Render the message/payload in your application
|
||||
console.log(wakuMessage);
|
||||
console.log(wakuMessage);
|
||||
};
|
||||
|
||||
// Set the query options
|
||||
@ -65,7 +65,7 @@ const queryOptions = {
|
||||
pageSize: 5,
|
||||
};
|
||||
|
||||
// Query the Store node
|
||||
// Query the Store peer
|
||||
await node.store.queryOrderedCallback(
|
||||
[decoder],
|
||||
callback,
|
||||
@ -95,9 +95,9 @@ const storeQuery = node.store.queryGenerator(
|
||||
// Process the messages
|
||||
for await (const messagesPromises of storeQuery) {
|
||||
// Fulfill all the messages promises
|
||||
const messages = await Promise.all(messagesPromises);
|
||||
// Render the message/payload in your application
|
||||
console.log(messages);
|
||||
const messages = await Promise.all(messagesPromises);
|
||||
// Render the message/payload in your application
|
||||
console.log(messages);
|
||||
}
|
||||
```
|
||||
|
||||
@ -171,14 +171,14 @@ import { waku } from "@waku/sdk";
|
||||
// Create the callback function
|
||||
const messages = [];
|
||||
const callback = (wakuMessage) => {
|
||||
messages.push(wakuMessage);
|
||||
messages.push(wakuMessage);
|
||||
};
|
||||
|
||||
// Retrieve the first 10 messages
|
||||
await node.store.queryOrderedCallback(
|
||||
[decoder],
|
||||
callback,
|
||||
{
|
||||
[decoder],
|
||||
callback,
|
||||
{
|
||||
pageSize: 10,
|
||||
},
|
||||
);
|
||||
@ -190,9 +190,9 @@ const cursor = await waku.createCursor(lastMessage);
|
||||
// Retrieve the next 10 messages
|
||||
// The message at the cursor index is excluded from the result
|
||||
await node.store.queryOrderedCallback(
|
||||
[decoder],
|
||||
callback,
|
||||
{
|
||||
[decoder],
|
||||
callback,
|
||||
{
|
||||
pageSize: 10,
|
||||
cursor: cursor,
|
||||
},
|
||||
@ -206,7 +206,7 @@ If you omit the `cursor` option, the query will start from the beginning or end
|
||||
|
||||
### `peerId`
|
||||
|
||||
The `peerId` option specifies the peer to query. If omitted, a pseudo-random peer is selected from the connected `Store` peers.
|
||||
The `peerId` option specifies the peer to query. A pseudo-random peer is selected from the connected `Store` peers if omitted.
|
||||
|
||||
```js
|
||||
const queryOptions = {
|
||||
@ -215,5 +215,5 @@ const queryOptions = {
|
||||
```
|
||||
|
||||
:::tip Congratulations!
|
||||
You have successfully retrieved and filtered historical messages on a light node using the `Store` protocol.
|
||||
You have successfully retrieved and filtered historical messages on a Light Node using the `Store` protocol. Check out the [store-js](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-js) and [store-reactjs-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/store-reactjs-chat) examples for working demos.
|
||||
:::
|
||||
@ -14,17 +14,10 @@ import TabItem from '@theme/TabItem';
|
||||
```
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="npx" label="npx">
|
||||
|
||||
```shell
|
||||
npx @waku/create-app [PROJECT DIRECTORY]
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npm init @waku/app [PROJECT DIRECTORY]
|
||||
npx @waku/create-app [PROJECT DIRECTORY]
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
@ -53,4 +46,4 @@ We welcome and appreciate the contributions of templates for the `@waku/create-a
|
||||
2. Place the template in the `examples` folder in the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository's root.
|
||||
3. Commit your changes with a detailed message and push them to your forked repository.
|
||||
4. Finally, submit a pull request to the [js-waku-examples](https://github.com/waku-org/js-waku-examples) repository.
|
||||
5. Our team will carefully review your submission and merge it upon approval.
|
||||
5. Our team will carefully review and merge your submission upon approval.
|
||||
356
docs/guides/js-waku/use-waku-react.md
Normal file
356
docs/guides/js-waku/use-waku-react.md
Normal file
@ -0,0 +1,356 @@
|
||||
---
|
||||
title: "Build React DApps Using @waku/react"
|
||||
---
|
||||
|
||||
The [@waku/react](https://www.npmjs.com/package/@waku/react) package provides components and UI adapters to integrate `js-waku` into React applications effortlessly. This guide provides detailed steps for using `@waku/react` in your project.
|
||||
|
||||
## Install the Dependencies
|
||||
|
||||
First, set up a project using any [production-grade React framework](https://react.dev/learn/start-a-new-react-project) or use an existing React application. For this guide, we will create a boilerplate using [Create React App (CRA)](https://create-react-app.dev/docs/getting-started):
|
||||
|
||||
```mdx-code-block
|
||||
import Tabs from '@theme/Tabs';
|
||||
import TabItem from '@theme/TabItem';
|
||||
```
|
||||
|
||||
<Tabs groupId="package-manager">
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npx create-react-app [PROJECT DIRECTORY]
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```shell
|
||||
yarn create react-app [PROJECT DIRECTORY]
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
Next, install the `@waku/react` package using your preferred package manager:
|
||||
|
||||
<Tabs groupId="package-manager">
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```shell
|
||||
npm install @waku/react @waku/sdk
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="yarn" label="Yarn">
|
||||
|
||||
```shell
|
||||
yarn add @waku/react @waku/sdk
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
## Create a Relay Node
|
||||
|
||||
Use the `useCreateRelayNode()` hook to create a Relay Node:
|
||||
|
||||
```js title="App.js"
|
||||
import { useCreateRelayNode } from "@waku/react";
|
||||
|
||||
function App() {
|
||||
// Create and start a Relay Node
|
||||
const { node, error, isLoading } = useCreateRelayNode({
|
||||
options: {
|
||||
defaultBootstrap: true,
|
||||
emitSelf: true,
|
||||
}
|
||||
});
|
||||
|
||||
// "node" is the created Relay Node
|
||||
// "error" captures any error that occurs during node creation
|
||||
// "isLoading" indicates whether the node is still being created
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
## Create a Light Node
|
||||
|
||||
Use the `useCreateLightNode()` hook to create a Light Node and specify the [protocols](/overview/concepts/protocols) for remote peers:
|
||||
|
||||
```js title="App.js"
|
||||
import { useCreateLightNode } from "@waku/react";
|
||||
import { Protocols } from "@waku/interfaces";
|
||||
|
||||
function App() {
|
||||
// Create and start a Light Node and wait for remote peers
|
||||
const { node, error, isLoading } = useCreateLightNode({
|
||||
options: { defaultBootstrap: true },
|
||||
protocols: [Protocols.LightPush, Protocols.Filter],
|
||||
});
|
||||
|
||||
// "node" is the created Light Node
|
||||
// "error" captures any error that occurs during node creation
|
||||
// "isLoading" indicates whether the node is still being created
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
## Create an Encoder and Decoder
|
||||
|
||||
Use the `useCreateContentPair()` hook to create a message `encoder` and `decoder` pair:
|
||||
|
||||
```js title="App.js"
|
||||
import { useCreateContentPair } from "@waku/react";
|
||||
|
||||
function App() {
|
||||
// Choose a content topic
|
||||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const ephemeral = false;
|
||||
|
||||
// Create a message encoder and decoder pair
|
||||
const { encoder, decoder } = useCreateContentPair(contentTopic, ephemeral);
|
||||
|
||||
// "encoder" is the message encoder
|
||||
// "decoder" is the message decoder
|
||||
// Use these to handle the messages in your application
|
||||
}
|
||||
```
|
||||
|
||||
## Send Messages Using Light Push
|
||||
|
||||
Use the `useLightPush()` hook to bind `Light Push` methods to a node and `encoder`:
|
||||
|
||||
```js title="App.js"
|
||||
import {
|
||||
useCreateLightNode,
|
||||
useCreateContentPair,
|
||||
useLightPush,
|
||||
} from "@waku/react";
|
||||
import { Protocols } from "@waku/interfaces";
|
||||
import { utf8ToBytes } from "@waku/sdk";
|
||||
|
||||
function App() {
|
||||
// Create and start a Light Node and wait for remote peers
|
||||
const { node, error, isLoading } = useCreateLightNode({
|
||||
options: { defaultBootstrap: true },
|
||||
protocols: [Protocols.LightPush, Protocols.Filter],
|
||||
});
|
||||
|
||||
// Choose a content topic and create an encoder
|
||||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const { encoder } = useCreateContentPair(contentTopic);
|
||||
|
||||
// Wait for the node to finish loading before sending messages
|
||||
// (isLoading === false)
|
||||
|
||||
// Bind push method to a node and encoder
|
||||
const { push } = useLightPush({ node, encoder });
|
||||
|
||||
// Send the message using Light Push
|
||||
const sendMessage = async (text) => {
|
||||
if (!push || !text) {
|
||||
return;
|
||||
}
|
||||
const payload = utf8ToBytes(text);
|
||||
await push({ payload });
|
||||
};
|
||||
sendMessage("Hello, World!");
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
Wait for the node to finish loading before sending messages (`isLoading` === `false`).
|
||||
:::
|
||||
|
||||
## Receive Messages Using Filter
|
||||
|
||||
Use the `useFilterMessages()` hook to receive messages from a `Filter` subscription:
|
||||
|
||||
```js title="App.js"
|
||||
import {
|
||||
useCreateLightNode,
|
||||
useCreateContentPair,
|
||||
useFilterMessages,
|
||||
} from "@waku/react";
|
||||
import { Protocols } from "@waku/interfaces";
|
||||
|
||||
function App() {
|
||||
// Create and start a Light Node and wait for remote peers
|
||||
const { node } = useCreateLightNode({
|
||||
options: { defaultBootstrap: true },
|
||||
protocols: [Protocols.LightPush, Protocols.Filter],
|
||||
});
|
||||
|
||||
// Choose a content topic and create a decoder
|
||||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const { decoder } = useCreateContentPair(contentTopic);
|
||||
|
||||
// Receive messages from Filter subscription
|
||||
const { error, messages, isLoading } = useFilterMessages({ node, decoder });
|
||||
console.log(messages);
|
||||
|
||||
// "error" captures any error that occurs while receiving messages
|
||||
// "messages" contains a list of messages the subscription received
|
||||
// "isLoading" indicates whether the node is still subscribing to Filter
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
## Retrieve Messages Using Store
|
||||
|
||||
Use the `useStoreMessages()` hook to retrieve messages from the `Store` protocol:
|
||||
|
||||
```js title="App.js"
|
||||
import {
|
||||
useCreateLightNode,
|
||||
useCreateContentPair,
|
||||
useStoreMessages,
|
||||
} from "@waku/react";
|
||||
import { Protocols, PageDirection } from "@waku/interfaces";
|
||||
|
||||
function App() {
|
||||
// Create and start a Light Node and wait for remote peers
|
||||
const { node } = useCreateLightNode({
|
||||
options: { defaultBootstrap: true },
|
||||
protocols: [Protocols.LightPush, Protocols.Filter],
|
||||
});
|
||||
|
||||
// Choose a content topic and create a decoder
|
||||
const contentTopic = "/waku-react-guide/1/message/utf8";
|
||||
const { decoder } = useCreateContentPair(contentTopic);
|
||||
|
||||
// Set the query options
|
||||
const options = {
|
||||
pageDirection: PageDirection.BACKWARD,
|
||||
pageSize: 20,
|
||||
};
|
||||
|
||||
// Query the Store peer
|
||||
const { error, messages, isLoading } = useStoreMessages({ node, decoder, options });
|
||||
console.log(messages);
|
||||
|
||||
// "error" captures any error that occurs during message retrieval
|
||||
// "messages" contains a list of messages retrieved from the Store peer
|
||||
// "isLoading" indicates whether the node is still retrieving messages
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
To explore the available query options, please refer to the [Store Query Options](/guides/js-waku/store-retrieve-messages#store-query-options) guide.
|
||||
:::
|
||||
|
||||
## Using @waku/react Providers
|
||||
|
||||
The `@waku/react` package provides a collection of [context providers](https://react.dev/reference/react/createContext#provider) to pass configuration options throughout the component hierarchy:
|
||||
|
||||
### `RelayNodeProvider`
|
||||
|
||||
The `RelayNodeProvider` context provider passes configuration options for creating a Relay Node:
|
||||
|
||||
```js title="index.js"
|
||||
import { RelayNodeProvider } from "@waku/react";
|
||||
import { Protocols } from "@waku/interfaces";
|
||||
|
||||
// Set the Relay Node options
|
||||
const NODE_OPTIONS = {
|
||||
defaultBootstrap: true,
|
||||
emitSelf: true,
|
||||
};
|
||||
|
||||
// Set the remote peer connections to wait for
|
||||
const PROTOCOLS = [Protocols.Relay];
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
// Use the Relay Node context provider
|
||||
<RelayNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
|
||||
<App />
|
||||
</RelayNodeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
```
|
||||
|
||||
```js title="App.js"
|
||||
import { useWaku } from "@waku/react";
|
||||
|
||||
function App() {
|
||||
// Create and start a Relay Node
|
||||
const { node, error, isLoading } = useWaku();
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
### `LightNodeProvider`
|
||||
|
||||
The `LightNodeProvider` context provider passes configuration options for creating a Light Node:
|
||||
|
||||
```js title="index.js"
|
||||
import { LightNodeProvider } from "@waku/react";
|
||||
import { Protocols } from "@waku/interfaces";
|
||||
|
||||
// Set the Light Node options
|
||||
const NODE_OPTIONS = { defaultBootstrap: true };
|
||||
|
||||
// Set the remote peer connections to wait for
|
||||
const PROTOCOLS = [
|
||||
Protocols.LightPush,
|
||||
Protocols.Filter,
|
||||
];
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
// Use the Light Node context provider
|
||||
<LightNodeProvider options={NODE_OPTIONS} protocols={PROTOCOLS}>
|
||||
<App />
|
||||
</LightNodeProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
```
|
||||
|
||||
```js title="App.js"
|
||||
import { useWaku } from "@waku/react";
|
||||
|
||||
function App() {
|
||||
// Create and start a Light Node
|
||||
const { node, error, isLoading } = useWaku();
|
||||
// Use these to handle states and render the UI in your application
|
||||
}
|
||||
```
|
||||
|
||||
### `ContentPairProvider`
|
||||
|
||||
The `ContentPairProvider` context provider passes configuration options for creating an `encoder` and `decoder` pair:
|
||||
|
||||
```js title="index.js"
|
||||
import { ContentPairProvider } from "@waku/react";
|
||||
|
||||
// Choose a content topic
|
||||
const CONTENT_TOPIC = "/waku-react-guide/1/message/utf8";
|
||||
const EPHEMERAL = false;
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
// Use the content pair context provider
|
||||
<ContentPairProvider contentTopic={CONTENT_TOPIC} ephemeral={EPHEMERAL}>
|
||||
<App />
|
||||
</ContentPairProvider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
```
|
||||
|
||||
```js title="App.js"
|
||||
import { useContentPair } from "@waku/react";
|
||||
|
||||
function App() {
|
||||
// Create a message encoder and decoder pair
|
||||
const { encoder, decoder } = useContentPair();
|
||||
// Use these to handle the messages in your application
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
You have successfully integrated `js-waku` into a React application using the `@waku/react` package. Check out the [web-chat](https://github.com/waku-org/js-waku-examples/tree/master/examples/web-chat) example for a working demo.
|
||||
:::
|
||||
@ -43,6 +43,6 @@ Waku provides integrations tailored for mobile applications, enabling Waku to ru
|
||||
| | Description | Documentation |
|
||||
| - | - | - |
|
||||
| JSON-RPC API | `JSON-RPC` API interface provided by `nwaku` and `go-waku` to interact with the Waku Network | |
|
||||
| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `js-waku` | |
|
||||
| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `js-waku` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/waku-create-app) |
|
||||
| [@waku/react](https://www.npmjs.com/package/@waku/react) | React components and UI adapters designed for seamless integration with `js-waku` | [Build React DApps Using @waku/react](/guides/js-waku/use-waku-react) |
|
||||
| [@waku/create-app](https://www.npmjs.com/package/@waku/create-app) | Starter kit to bootstrap your next `js-waku` project from various example templates | [Bootstrap DApps Using @waku/create-app](/guides/js-waku/use-waku-create-app) |
|
||||
| [nwaku-compose](https://github.com/alrevuelta/nwaku-compose) | Pre-configured Docker Compose setup for running and monitoring a `nwaku` node using Prometheus and Grafana | [Run Nwaku with Docker Compose](/guides/nwaku/run-docker-compose) |
|
||||
@ -75,7 +75,8 @@ const sidebars = {
|
||||
"guides/js-waku/relay-send-receive",
|
||||
"guides/js-waku/light-send-receive",
|
||||
"guides/js-waku/store-retrieve-messages",
|
||||
"guides/js-waku/waku-create-app",
|
||||
"guides/js-waku/use-waku-react",
|
||||
"guides/js-waku/use-waku-create-app",
|
||||
{
|
||||
type: 'html',
|
||||
value: '<a href="https://examples.waku.org" target="_blank" rel="noopener noreferrer" class="menu__link external-link">Examples<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1918 4H3.42848V2.85715H13.1428V12.5714H11.9999V4.80813L3.83254 12.9755L3.02441 12.1674L11.1918 4Z" fill="white"/></svg>',
|
||||
@ -97,9 +98,9 @@ const sidebars = {
|
||||
},
|
||||
],
|
||||
community: [
|
||||
"powered-by-waku",
|
||||
"community",
|
||||
"contribute",
|
||||
"powered-by-waku",
|
||||
"presentations",
|
||||
{
|
||||
type: 'html',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user