Get Started

Kapsule toolkit is a react wrapper around SDK. His goal is to enhance code readability and make it easier to code ! Avoid setting up a context that loads the config and users each time you create a kapsule by using kapsule toolkit's contexts.

Installation

On a working kapsule, first install the package

npm install @k-hubs/kapsule-toolkit

Setup

First, you will need to initiate all contexts so that you can use them in your code. For that you'll use the createContexts() function

import settings from "...";
import fakeReport from "...";

export interface IAppConfig {
  settings: IConfig,
  questions: IQuestion[]
}

const fakeConfig = {settings, questions: questions as IQuestion[]}

export const {
  useAppContext,
  useReportContext,
  AppContextProvider,
  ReportProvider,
  AppProvider,
  EditorProvider,
  useEditorContext
} = createContexts<IAppConfig>(fakeConfig, import.meta.env.DEV, fakeReport)

To initiate your context you will have to give a fakeConfig, which will be loaded if your app is in devMode else, it will be fetched from the kapsule. The fakeReport serves the same purpose, but for the report view.

The createContexts() function takes a generic type which is the type of your config.

info

I recommend setting this file in common/contexts/app-context.ts because it can be used in every view

Usage

For each view, simply call each provider that you need around your App

// animator/main.tsx
import {AppProvider} from "@common/context/app-context.ts"; // import from your lastly created file

Root({
  children: (
    <AppProvider>
      <App/>
    </AppProvider>
  )
})

Now you can use everything from the AppContext