Skip to main content

Using React

The Cerebellum SDK provides ready-to-use React hooks to simplify the integration and usage of the SDK in your React applications. It was built from the ground up with React integration in mind and is the preferred way to integrate the Cerebellum SDK into your React applications.

Step 1: Create a Configuration File​

Create a CerebellumConfig.ts file in your project's root directory. This file will contain the configuration settings for your Cerebellum instance. An example of the directory structure and configuration file for a react app can be found below:

Directory Structure

your-project/
├── src/
│   ├── CerebellumConfig.ts
│   ├── Main.tsx
│   └── App.tsx
|   └── ...
└── ...

An example of the CerebellumConfig.ts file:

export const endpoint = "http://localhost:8001";
export const CerebellumOptions = {
  autoConnect: true,
  API_KEY: "SAMPLE_API_KEY",
  reconnection: true,
  reconnectionAttempts: 5,
  reconnectionDelay: 5000,
  reconnectionDelayMax: 5000,
  timeout: 20000,
};

Explanation

  • In this example, the CerebellumConfig.ts file is created in the src directory of the project. It contains the configuration settings for the Cerebellum instance, including the endpoint URL, API key, and other options.
  • You can use the above Cerbellum configuration when using the cerebellum development server/image, as it is already preconfigured. If you would like to learn more about the options available, please refer to the cerebellum options section.

Step 2. Setup the Cerebellum Provider​

In your Main.tsx file, import the CerebellumProvider and CerebellumConfig components. Then, wrap your application with the CerebellumProvider component and pass it in the configuration file as a prop. The CerebellumProvider component will provide the necessary context and state for your application.

import ReactDOM from "react-dom/client";
import App from "./App";
import { CerebellumProvider } from "@cerebellum/sdk";
import { endpoint, CerebellumOptions } from "./CerebellumOptions";

ReactDOM.createRoot(document.getElementById("root")).render(
  <CerebellumProvider endpoint={endpoint} options={CerebellumOptions}>
    <App />
  </CerebellumProvider>
);

In this step, you have successfully set up the CerebellumProvider component and passed in the configuration file as a prop. This will provide the necessary context and state to your application, to access the Cerebellum instance and its methods. Furthermore, it also provides access to the custom hooks that you can use to interact with the Cerebellum instance.