GiraffeState

Iframes can listen to data from the parent Giraffe window using giraffeState.

Example usage

import { giraffeState } from '@gi-nx/iframe-sdk';

giraffeState.addListener(['mapContent'], (key: string) => {
  console.log('mapContent has changed', giraffeState.get('mapContent'));
});

For React apps, use the useGiraffeState hook:

function useGiraffeState<K extends GiraffeStateEventKey>(key: K): GiraffeStateGet[K]

import { useGiraffeState } from '@gi-nx/iframe-sdk-react';

export const MyComponent = () => {
  const stackedSections = useGiraffeState('stackedSections');
  return <div>...</div>;
};

The returned snapshot is read-only. Don't mutate it. Copy before editing: const editable = structuredClone(snap) (deep) or const editable = { ...snap } (shallow).

State Types

The available keys and their types:

Key	Type
selected	GiraffeStateSelected
mapView	MapView
mapContent	MapContent
mapSelectCoord	GiraffeStateMapSelectCoord
projects	GiraffeStateProjects
bakedSections	GiraffeStateBakedSections
projectLayers	GiraffeStateProjectLayers
rawSections	GiraffeStateRawSections
flows	GiraffeStateFlows
blocks	GiraffeStateBlocks
project	GiraffeStateProject
projectOrigin	GiraffeStateProjectOrigin
projectAppsByAppID	GiraffeStateProjectAppsByAppID
layerTree	GiraffeStateLayerTree
selectedProjectApp	GiraffeStateSelectedProjectApp
mapHoverCoords	GiraffeStateMapHoverCoords
closingSignal	GiraffeStateClosingSignal
uiLayout	GiraffeStateUiLayout
contextMenuClick	GiraffeStateContextMenuClick
views	GiraffeStateViews
mapboxEvent	GiraffeStateMapboxEvent
workspace	GiraffeStateWorkspace
visibleScenarios	GiraffeStateVisibleScenarios

Related Types

• GiraffeStateGet - Return types for giraffeState.get()
• GiraffeStateAttr - Union of all state attribute types
• GiraffeStateAttrMap - Object type with all state keys
• GiraffeStateEventKey - Valid keys for state events