Installation

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,
  },
});

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 />;
}