Aller au contenu principal

Contexts

Contexts​

AppContext​

attention

Only use this context in the live (animator, participant, projector)

This context holds everything you will need to start developing your kapsule right away !

const {me, users, teams, animatorId, config, infos, roomConfig} = useAppContext()

Type:

EditorContext​

attention

Only use this context in the editor view

The EditorContext helps you by loading the config and handle sending it to k-hubs on change

const {config, setConfig, preset, save} = useEditorContext()

Type: config: ConfigType from the createContexts() function setConfig: (config: ConfigType) => void preset: ICapsulePreset save: () => void save the config it can't be done by the user

ReportContext​

attention

Only use this context in the report view

Load for you the report and create an app context so that your components that works in the live also works in the report ! That means you can use useAppContext underneath

const {reportData} = useReportContext()

Type: reportData: IReport

LoaderContext Deprecated​

This context will register what is loading and what is not so that you can set a contextLoader that will show a spinner when loading !

You can add anything to the loader context using setIamLoading

const {setIamLoading} = useLoaderContext()

useEffect(() => {
  (async () => {
    setIamLoading(true, 'your-id')
    await fetchFunction();
    setIamLoading(false, 'your-id')
  })()
}, []);

ContextLoader Deprecated​

Show a spinner instead of the children when the LoaderContext is loading

    <LoaderProvider> <-- save the is loading state
      <AppProvider>
        <ContextLoader> <-- show the app when the loader provider says everything is loaded
          <App/>
        </ContextLoader>
      </AppProvider>
    </LoaderProvider>

Methods​

createContexts<ConfigType>()​

Type: createContexts<ConfigType>(fakeConfig: ConfigType, devMode: boolean, fakeReportData: IReport) => AllContexts Parameters:

  • fakeConfig: will be loaded in devMode
  • devMode: mock production functions so that everything works in the dev server !
  • fakeReport: will be loaded in devMode in the report view

The main function to create all contexts Returns all contexts that you'll need !