React / RN integration

Improve your debug experience with provided custom hooks

If your application uses React or React Native, CodeBud package provides you these awesome custom hooks that can be useful:

useEvent

This hook allows you to create some event-handling logic inside of functional components. Note that it works in addition with handler function of created instruction. Both functions (instruction handler and passed into hook) will be executed.

Parameters:

Name
handler
Type
(event: RemoteEvent) => any
Description
Callback function.
Name
instructionIds
Type
string[]
Description
Array of instructions to be monitored.

Usage example

import { useEvent } from "@appklaar/codebud/react";

useEvent((event) => {
  console.log("New event:", event);
  // Process event
  // ...
}, ["helloWorldInstruction"]);

useRemoteSettings

This hook returns current Remote Settings as reactive object. Can be useful when binding in-app layout / logic to CodeBud remote settings.

Returns:

Name
object
Type
RemoteSettings | null
Description
Remote settings reactive object.

  import { useRemoteSettings } from "@appklaar/codebud/react";

  const remoteSettings = useRemoteSettings();

useContextMonitor

This hook allows you to monitor your React context with CodeBud.
Monitored contexts can be observed on the Context tab in GUI.

Don't forget to add Context tab to navigation bar, it can be done on "Other" tab.

Parameters:

Name
SomeContext
Type
React.Context<any>
Description
A context object (the value returned from React.createContext).
Name
label
Type
[optional] string
Description
Your label for passed context. If not provided, random ID will be used instead.
We recommend you to choose your label for better debug experience.
Name
waitMs
Type
[optional] number
Description
Throttle time (in ms) of sending new context value copy. Defaults to 500.

  import { useContextMonitor } from "@appklaar/codebud/react";
  // Your context(s)
  import { UserDataContext } from './providers/UserDataProvider';
  import { ProductsContext } from './providers/ProductsProvider';

  useContextMonitor(UserDataContext, "UserDataContext");
  useContextMonitor(ProductsContext, "ProductsContext");