UI Kit Providers

Providers in React are a way to pass data through the component tree without having to pass props down manually at every level. In the Help Scout UI Kit, we use a context provider to expose the Help Scout context data to your components in a simple and efficient way.


HelpScoutContextProvider is a component that makes the Help Scout context data available to all components in its subtree. By wrapping your root component with HelpScoutContextProvider, you can access Help Scout’s context in any child component.

Here’s a basic example of how to use HelpScoutContextProvider:

import React from "react";
import ReactDOM from "react-dom";
import { HelpScoutContextProvider } from "@helpscout/ui-kit";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
      <App />

In the example above, HelpScoutContextProvider is used to wrap the root App component. This makes Help Scout’s context data available to App and all of its child components.

Usage with useHelpScoutContext hook:

In your child components, you can use the useHelpScoutContext() hook to access the context data. This hook returns an object with properties company, conversation, customer, mailbox, and user, which contain information about the current Help Scout environment.

For detailed examples on how to use HelpScoutContextProvider and useHelpScoutContext() hook in your components, refer to our comprehensive guide on Getting Data from Help Scout with JavaScript.

The HelpScoutContextProvider component and the useHelpScoutContext() hook allow you to easily access Help Scout’s context data in your React components without having to call the SDK’s HelpScout.getApplicationContext() and manage context manually.

You now know how to use HelpScoutContextProvider and useHelpScoutContext() to access and display Help Scout’s context data in your React application. Enjoy building!