React component

The @usehall/react library lets you embed your community in a few lines code in your React app. See Getting started to learn how to get your app credentials.

Installation

@usehall/react is published on the npm registry. Install it with your favorite package manager:

npm install @usehall/react

For detailed library documentation, see the API section.

User Authentication

To login the user, you can either pass the token to the component in server-side contexts (i.e. Next.js), or use a hook on the client after fetching the token from your backend. See User authentication for more info on how to create and sign the token.

Server-side example

import { HallEmbed } from "@usehall/react";

// Using React Server Components, i.e. Next.js App Router
export async function Page() {
  const userToken = await getJWTForUser("userId");

  return <HallEmbed appId="YOUR APP ID" userToken={userToken} />;
}

Client-side example

import { HallEmbed, useHallEmbed } from "@usehall/react";

// Using a React component rendered on the client
export function Component() {
  const { login } = useHallEmbed();

  useEffect(() => {
    // getUserTokenAPI makes a call to your backend for the user's token
    const userToken = getUserTokenAPI().then((token) => login(token));
  }, []);

  return <HallEmbed appId="YOUR APP ID" />;
}

API

HallEmbed component

Minimal example

import { HallEmbed } from "@usehall/react";

export function Component() {
  return <HallEmbed appId="YOUR APP ID" />;
}

Required props

Name	Type	Description
appId	string	Your embed's unique app ID. You can see get this from your developer settings.

Optional props

Name	Type	Description
className	string	className to apply to the container.
disableRouting	boolean	Prevents the embed from reflecting the path in the window's url hash. See Routing for more information.
disableTitle	boolean	Prevents the embed from updating window.title to reflect the current route.
disableToast	boolean	Prevents the embed from displaying toast notification. notifications
id	string	id of the container created internally. Defaults to hall-embed-container.
initialPath	string	The initial path to load. See Routing for more information.
onLoad	() => void	Callback fired when the embed is loaded.
style	CSSProperties	Inline styles to apply to the container. div
userToken	string	Signed token from your server to log the user in automatically. See User authentication for more information.
theme	'light' | 'dark'	Override the light/dark theme for the embed. Defaults to the user's preference.

useHallEmbed React hook

Minimal example

import { HallEmbed, useHallEmbed } from "@usehall/react";

export function Component() {
  const { login } = useHallEmbed();

  return <HallEmbed appId="YOUR APP ID" />;
}

Parameters

None

Returns

{
  login: (userToken: string) => void;
}

Where userToken is the signed token to authenticate the user.