Context components

A context is server or client component that wraps the Interact server or client Application.

The following React component may be defined as context component:

• Context Provider (ie tracker, url state manager, ...)
• Error Boundaries

Example

Default Client Error Boundary

This is the minimal InteractContext component used by default

tsx⎘ Copy
export default function InteractContext({children}: { children: ReactNode }) {

    return (
        <ErrorBoundary>
            {children}
        </ErrorBoundary>
    )

}

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⎘ Copy
import {PostHogProvider} from '@posthog/react'

// noinspection JSUnusedGlobalSymbols
export default function PostHogContext({children}: { children: ReactNode }) {
    return (
        <PostHogProvider apiKey={"xxx"}>
            {children}
        </PostHogProvider>
    )
}

Default

The default one can be seen in the main/src/resources/components/contexts directory

We provide a standard InteractContext with an error boundary that you may override. For instance, you would override it by creating your own InteractContext component at @/components/contexts/InteractContext.tsx

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

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

How to list all context components

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

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

Example output:

yaml⎘ Copy
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⎘ Copy
{
  "components": {
    "myContext": {
      "importPath": "src/components/MyContext.tsx",
      "type": "context"
    }
  }
}