React

huddle is a React (opens in a new tab) component built in Typescript that integrates with any React application using the React version >17. We chose React for it's simplicity and vast adoption (other than the fact that we love it so dearly ❤️).

React 18 and RSC

huddle is a client only component. You must use the "use client" directive in your React 18 project to use huddle.

Installation

To install huddle in your project, run the installation command using your favourite package manager:

pnpm add @huddlerun/react
# or
yarn add @huddlerun/react
# or
npm install @huddlerun/react

Props

huddle takes in the following props:

Name	Type	Description	Required
frontendKey	string	The frontendKey of the huddle project copied from the dashboard.	true
pathname	string	The pathname of the current page.	true

frontendKey

The frontendKey is your project's unique identifier. You can find it in the dashboard (opens in a new tab) under the project settings.

pathname

The pathname prop is the current page's pathname. This is used to identify the current page to map the feedback correctly.

We require the pathname as a prop to keep huddle unopinionated. This way you can use routing solution of your choice such as the useLocation hook from react-router or next/router to get the pathname.

Next.js example

Let's see how to use huddle in a Next.js project.

Initializing huddle

To use huddle in your project, you need to initialize it using with the frontendKey and pathname. In Next.js 13, you can get the pathname using the usePathname hook from next/navigation.

The code below creates a React Client Component using the "use client" directive to avoid rendering this component on server and initializes the component's styles.

To initialize huddle,

Create a new file HuddleClient.tsx in the ./components folder.
Copy the below code and paste it in the newly created file.
Replace the frontendKey copied from the huddle dashboard (opens in a new tab).

./app/HuddleClient.tsx

"use client";
import Huddle from "@huddlerun/react";
import "@huddlerun/react/styles.css";
import { usePathname } from "next/navigation";
 
export default function HuddleClient() {
  const pathname = usePathname();
  return <Huddle frontendKey="<copied-from-dashboard>" pathname={pathname} />;
}

Using huddle

With your HuddleClient component ready, import the component inside the app/layout.tsx file and use it within the body.

./app/layout.tsx

import React from "react";
import HuddleClient from "./HuddleClient";
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>
        {children}
        <HuddleClient />
      </body>
    </html>
  );
}

Introduction Next.js example