We're thrilled to announce the official launch of the River React SDK—a major milestone in our mission to revolutionize decentralized communication. With 300,000+ members, 200,000+ spaces, and ~24,400 daily active users, River has proven the demand for decentralized communication. Now, we're making it accessible to every React developer.

Why the River React SDK Matters

Our platform's rapid growth tells a compelling story:

• 254% month-over-month growth in highly active spaces

• 230% month-over-month growth in power users

• 25.1% Week 1 retention (up from 15.3% in October)

• ~3,000 new users joining daily

The React SDK transforms this thriving ecosystem into a developer-friendly toolkit, enabling anyone to integrate secure, scalable, and user-owned messaging into their React applications—no deep blockchain expertise required.

Core Features

• Pre-configured React components and hooks for messaging and Space management

• Built-in security and scalability from River's battle-tested protocol

• Streamlined UX development with blockchain complexity handled under the hood

Getting Started

Getting Started with the River React SDK

The SDK makes building on River simple and accessible. You can find all of our documentation in https://docs.river.build/sdk/react-sdk/getting-started

Here’s how you can get started today:

Step 1: Scaffold a New App

To quickly set up a new React project pre-configured for River:

yarn create river-build-app my-app

Step 2: Install the SDK

For existing projects, install the required packages:

yarn add @river-build/react-sdk @river-build/sdk vite-plugin-node-polyfills

Step 3: Configure Vite

Update your vite.config.ts file to include the necessary polyfills for Node.js compatibility:

javascript
Copy code
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    nodePolyfills(),
  ],
});

Step 4: Set Up the Provider

Wrap your app with the RiverSyncProvider to enable SDK features:

javascript
Copy code
import { RiverSyncProvider } from '@river-build/react-sdk';

<RiverSyncProvider config={{ onTokenExpired: () => console.log('Token expired!') }}>
  <YourApp />
</RiverSyncProvider>;

Step 5: Authenticate and Connect

Use the useAgentConnection hook to authenticate users and connect to River:

javascript
Copy code
import { useAgentConnection } from '@river-build/react-sdk';

const ConnectButton = () => {
  const { connect, isAgentConnected } = useAgentConnection();

  return (
    <button onClick={() => connect(signer, { riverConfig })}>
      {isAgentConnected ? 'Connected' : 'Connect'}
    </button>
  );
};

Step 6: Build Features

Use River’s extensive hooks to implement advanced features like:

• Messaging: useSendMessage, useScrollback

• Spaces: useCreateSpace, useJoinSpace, useSpace

• Channels and DMs: useCreateChannel, useDm, useThreads

• Custom Member Actions: useSetDisplayName, useSetNft

Step 7: Deploy and Innovate

Ship your app and showcase how decentralized communication can redefine user interactions.

Building on River's Success

With 40,000 spaces having active daily conversations and consistent 20% week-over-week growth, River provides a robust foundation for:

• Social Networks with user-owned data

• Gaming communities with token-gated access

• Decentralized messaging tools with end-to-end encryption

• Creator platforms with programmable spaces

Get Started Today

Visit our documentation at docs.river.build to start building. Join our growing developer community that's already serving hundreds of thousands of users across decentralized applications.

The future of communication is decentralized, and with the River React SDK, it's now more accessible than ever.