React / RN integration

Improve your debug experience with provided custom hooks & components

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.

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

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

useRemoteSettings

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

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

  const remoteSettingsStaging = useRemoteSettings("stg");

useContextMonitor

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

  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");

Components

React components designed to improve your debug experience

ReactNativeWrapper

Multi tool component that provides additional CodeBud features for React Native projects

Init modal

Imagine situation: your team is working on large project, and you're using CodeBud in order to inspect it. It is time to make build so that 5+ testers can dig into it. Which api key should you use to make a build? What if each tester also wants to use his own CodeBud api key? Of course making 5+ builds for each api key is not a rational solution.

Commonly, in situation described above, you should add UI to your project, where you would ask tester to paste his api key, and only then call CodeBud.init method. This is exactly a purpose of Init modal! You can trigger it any time and ask tester to enter his api key.

CodeBud Init modal screenshot (iOS 17.4)

Usage example

import React, { useRef } from "react";
import { Text, TouchableOpacity, SafeAreaView } from "react-native";
import { ReactNativeWrapper, ReactNativeWrapperMethods } from "@appklaar/codebud/rn";
import { CodeBud } from "@appklaar/codebud";
// ...

const WelcomeScreen: React.FC<any> = ({}) => {
  // Create ref for CodeBud ReactNativeWrapper
  const codebudWrapperRef = useRef<ReactNativeWrapperMethods | null>(null);

  const onInitCodeBud = (apiKey: string) => {
    if (CodeBud.isInit) { // If CodeBud is already initialized, we should disconnect it, then init again
      CodeBud.disconnect();
    }

    // Setup CodeBud as you usually prefer (similar to basic usage)
    CodeBud.init(
      apiKey, 
      INSTRUCTIONS, // Your array of instructions
      // config
    );

    // Call other CodeBud methods if you need to
  }

  return (
    <ReactNativeWrapper 
      ref={codebudWrapperRef} 
      initModalProps={{onInit: onInitCodeBud}}
    >
      <SafeAreaView style={styles.container}>
        /* ... */
        
        <TouchableOpacity onPress={() => codebudWrapperRef?.current?.showInitModal()}>
          <Text>{"Trigger CodeBud init modal"}</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </ReactNativeWrapper>
  );
};