Skip to main content

@foxglove/embed-react

This package provides the <FoxgloveViewer /> component, providing a React API for embedding Foxglove in your application.

<FoxgloveViewer /> component props​

ref (optional)​

  • Description: A React ref that provides access to imperative methods via FoxgloveViewerInterface.
  • Type: React.Ref<FoxgloveViewerInterface>

src (optional)​

  • Description: The URL where the Foxglove app is hosted. Defaults to https://embed.foxglove.dev/.
  • Type: string

orgSlug (optional)​

  • Description: The Foxglove organization the user should be signed into. Passing this parameter is recommended so the user can be prompted to switch to the correct org if necessary.
  • Type: string

data (optional)​

  • Description: The data source to visualize in the Foxglove app.
  • Type: DataSource

layout (optional)​

  • Description: Parameters to load a layout from the local storage or create a new one and save it to the local storage if no layout with the same storage key is found or if the force parameter is true.
  • Type: SelectLayoutParams
    • storageKey - The storage key to identify the layout in local storage. When reusing the same storage key, any modifications made by the user will be restored unless force is true.
    • opaqueLayout - The layout data to load if this layout did not already exist, or if force is true. This is an opaque JavaScript object, which should be parsed from a JSON layout file that was exported from the Foxglove app. If not provided, the default layout will be used.
    • force - If true, opaqueLayout will override the layout if it already exists. Default: false

extensions (optional)​

warning

This functionality is only supported in the fully self-hosted embedded viewer. Please refer to the self-hosted documentation for more information.

warning

Since the self-hosted embedded viewer runs on your own infrastructure, you won't be able to access your organization's extensions hosted on Foxglove's servers.

  • Description: The extensions to install in the Foxglove app. Can be URLs pointing to .foxe file or .foxe File objects.
  • Type: Array<string | File>

colorScheme (optional)​

  • Description: The color scheme to use in the Foxglove app.
  • Type: "light" | "dark" | "auto"
  • Default: "auto"

className (optional)​

  • Description: CSS class name to apply to the container element.
  • Type: string

style (optional)​

  • Description: The style to apply to the container.
  • Type: React.CSSProperties

onReady (optional)​

  • Description: Callback function that is called when the Foxglove app is ready.
  • Type: () => void

onError (optional)​

  • Description: Callback function that is called when the Foxglove app encounters an error when trying to update the data source, layout, or extensions.
  • Type: (errorMsg: string) => void

FoxgloveViewerInterface methods​

getLayout(): Promise<OpaqueLayoutData>​

Retrieve the currently configured layout from the embedded viewer. Returns a Promise that resolves with an opaque JavaScript object representing the current layout. This can be used as the opaqueLayout property of SelectLayoutParams.

Performance Considerations​

The component includes performance warnings for frequently changing props. Consider memoizing the following props to avoid unnecessary re-renders:

  • data - Data source changes
  • layout - Layout configuration changes
  • extensions - Extension list changes

Requirements​

  • React 18 or higher
  • For live data sources, the target must be accessible from the browser

Error Handling​

The component provides error handling through the onError callback, which reports errors that occur when updating the data, layout, or extensions props.