Installation

This SDK is the client half of your integration. Feed groups, ranking, permissions, push setup and bulk imports are configured from your backend with a server-side SDK or the REST API, and the token your app connects with has to be signed there too. See the server-side overview for what belongs there, starting with tokens and authentication.

npm install @stream-io/feeds-react-sdk
# or using yarn
yarn add @stream-io/feeds-react-sdk

GitHub repository: https://github.com/GetStream/stream-feeds-js. Feel free to submit bug reports and feature requests.

The package can be used with both JavaScript and TypeScript.

import { useCreateFeedsClient } from "@stream-io/feeds-react-sdk";

const client = useCreateFeedsClient({
  apiKey,
  userData: {
    id: "adam",
    // Optional data
    name: "Adam",
    image: "url/to/profile/picture",
  },
  tokenOrProvider: "<string token or token API call>",
  // Optional
  options: {
    timeout: 5000,
  },
});

The timeout option is the per-request timeout in milliseconds (default 3000).

Supported React versions: 17 || 18 || 19

Server-side rendering (SSR)

The React Activity Feeds SDK is built for the browser and does not support server-side rendering. Do not render SDK components or call SDK hooks (for example useCreateFeedsClient) during the server render pass in SSR frameworks such as Next.js or Remix.

Next.js example

In the Next.js Pages Router, you can load a feeds-only subtree on the client with next/dynamic and { ssr: false }. See Lazy loading with no SSR in the Next.js docs.

import dynamic from "next/dynamic";

const FeedsApp = dynamic(() => import("../components/FeedsApp"), {
  ssr: false,
});

export default function Page() {
  return <FeedsApp />;
}

Point the dynamic import at a module that imports @stream-io/feeds-react-sdk and renders your feeds UI.

In the App Router, put all feeds hooks and components in a file that starts with 'use client', then import that file from your page.tsx. Your page can stay a Server Component; only the feeds module is client-side.

// app/feeds-ui.tsx
"use client";

import { useCreateFeedsClient } from "@stream-io/feeds-react-sdk";

export function FeedsUi() {
  const client = useCreateFeedsClient({
    /* ... */
  });
  // ...
}

// app/page.tsx
import { FeedsUi } from "./feeds-ui";

export default function Page() {
  return <FeedsUi />;
}

Quick Start

Architecture & Benchmark