Context components

context components are components that wraps the React tree.

They provides:

a React Context (ie tracker, url state manager, ...)
Error Boundaries

Example: Client Tracker

With the Posthog Tracker, you would create the following file PostHogContext.tsx in the contexts directory - default to src/components/contexts

tsx
import {PostHogProvider} from '@posthog/react'

export default function PostHogContext({children}: { children: ReactNode }) {
    let apiKey = import.meta.env.INTERACT_POSTHOG_API_KEY
    if (apiKey == null || apiKey == '') {
        console.error("The INTERACT_POSTHOG_API_KEY env is not defined.")
        return children;
    }
    return (
        <PostHogProvider apiKey={"xxx"}>
            {children}
        </PostHogProvider>
    )
}

Syntax

They:

are considered a client component unless their name include server
accepts no props (but you can inject env)
should export the component as default

javascript
export default function MyContextProvider({children}: { children: ReactNode }) {
}

How to list all context components

context components are registered components. You can see them by running the interact config command

bash
interact config -f components
# to select only the context component with yq
interact config -f components | yq 'to_entries | map(select(.value.type == "context")) | from_entries'

Example output:

yaml
InteractContext:
  importPath: "@combostrap/interact/components/contexts/InteractContext"
  type: context

Registration / Default Directory

To register a context component automatically, you can save it in the contexts directory (By default, src/components/contexts)

You can also register it manually by:

adding it in the components section of the configuration file
and setting the type to context

json
{
  "components": {
    "myContext": {
      "importPath": "src/components/MyContext.tsx",
      "type": "context"
    }
  }
}

Interact Context

The InteractContext provides:

an error boundary
the search engine

Server vs Client Context

A context component can only be found:

in the browser
or in the server

They are considered a client component unless their name include server