React components

npm · Website · Source

The React package provides BeepgridRequest, BeepgridConversation, useBeepgridRequest and browserClient. It uses the same access rules as the workspace.

Install

npm install @beepgrid/react @beepgrid/sdk react

React 19 or later is required. Styles are optional and imported separately.

Embed a request

In a React application with the packages installed:

import { useMemo } from 'react';
import { browserClient, BeepgridRequest } from '@beepgrid/react';
import '@beepgrid/react/styles.css';

export function Decision({ requestId }: { requestId: string }) {
  const client = useMemo(() => browserClient(), []);
  return <BeepgridRequest client={client} id={requestId}
    onConversation={id => location.assign('/conversations/' + id)} />;
}

Supply an actual request ID visible to the signed-in person. Use BeepgridConversation with the conversation ID to embed its thread.

Authenticate the person

Host behind the same origin as Beepgrid, or proxy /api/v1 through your application. Establish the person’s Beepgrid HttpOnly session through the configured identity flow. Your application’s unrelated login cookie is not automatically a Beepgrid identity.

Never put worker, owner, launcher or provider tokens in browser code. The server checks the person’s current permissions for every operation.

Unmounting a component stops its polling, not the underlying request. The supplied styles are optional; preserve accessible form controls when customizing them.

---

Read this page as Markdown