Getting Started
This guide will help you get started with River’s React SDK. You’ll learn how to:
- Install the React SDK
- Set up the necessary providers
- Connect to River
- Create a space
- Send your first message
Installation
You can start a new River project in two ways:
Using create-river-build-app (Recommended)
The easiest way to get started is using create-river-build-app
. This will set up a new React project with all the necessary dependencies and configurations.
By default, this will create a new app using the River Playground template - a full-featured example application that demonstrates River’s capabilities.
Manual Installation
If you prefer to add the React SDK to an existing project, install the required dependencies:
Then, add the vite-plugin-node-polyfills
to your vite.config.ts
:
Setting Up Providers
River requires a few providers to be set up at the root of your application:
WagmiProvider
- For Web3 wallet connection (recommended)RiverSyncProvider
- For interacting with River Network
Here’s how to set them up:
If you need any assistance with setting up Wagmi, check out the Wagmi Getting Started Guide.
Connecting to River
You can connect to River using either a Web3 wallet (recommended) or a bearer token.
River has three networks:
omega
- The River mainnet, uses Base as the EVM chaingamma
- The River testnet, uses Base Sepolia as the EVM chainalpha
- The River testnet, uses Base Sepolia as the EVM chain
If you’re not sure which network to use, alpha
is a good starting point.
You can use other alpha clients like Towns (alpha) or the River Playground to help you inspect messages on the alpha
network.
Using a Web3 Wallet
You’ll need to use getEthersSigner
to get the signer from viem wallet client.
River SDK uses ethers under the hood, so you’ll need to convert the viem wallet client to an ethers signer.
You can get the getEthersSigner
function from Wagmi docs.
Using a Bearer Token
You can connect to River using a pre-existing identity. This allows you to read and send messages, but you won’t be able to create spaces or channels (on-chain actions).
If you have a Towns account, you can get your bearer token from there. Type /bearer-token
in any conversation to get your token.
Creating a Space
Once connected, you can start interacting with River. Here’s how to create a space:
You can only create a space with a Web3 wallet. If you’re using a bearer token, you can’t create spaces.
Sending Your First Message
With the space created, we can send a message to the #general
channel.
Here’s how to create a form
Add the ChatApp
component to your app and you’re ready to start chatting!
Next Steps
Now that you have the basics set up, you can:
- Create and join spaces
- Create channels
- Send messages
- Read messages
- Send reactions
- Set username
- Read message threads
- much more! You can find the full list of hooks in the API Reference.
Check out our Playground template for a full-featured example application.
Was this page helpful?