# GiraffeState

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

## Example usage

```ts
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:

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

```ts
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](/build/type-aliases/GiraffeStateSelected)                     |
| `mapView`            | [MapView](/build/type-aliases/MapView)                                               |
| `mapContent`         | [MapContent](/build/type-aliases/MapContent)                                         |
| `mapSelectCoord`     | [GiraffeStateMapSelectCoord](/build/type-aliases/GiraffeStateMapSelectCoord)         |
| `projects`           | [GiraffeStateProjects](/build/type-aliases/GiraffeStateProjects)                     |
| `bakedSections`      | [GiraffeStateBakedSections](/build/type-aliases/GiraffeStateBakedSections)           |
| `projectLayers`      | [GiraffeStateProjectLayers](/build/type-aliases/GiraffeStateProjectLayers)           |
| `rawSections`        | [GiraffeStateRawSections](/build/type-aliases/GiraffeStateRawSections)               |
| `flows`              | [GiraffeStateFlows](/build/type-aliases/GiraffeStateFlows)                           |
| `blocks`             | [GiraffeStateBlocks](/build/type-aliases/GiraffeStateBlocks)                         |
| `project`            | [GiraffeStateProject](/build/type-aliases/GiraffeStateProject)                       |
| `projectOrigin`      | [GiraffeStateProjectOrigin](/build/type-aliases/GiraffeStateProjectOrigin)           |
| `projectAppsByAppID` | [GiraffeStateProjectAppsByAppID](/build/type-aliases/GiraffeStateProjectAppsByAppID) |
| `layerTree`          | [GiraffeStateLayerTree](/build/type-aliases/GiraffeStateLayerTree)                   |
| `selectedProjectApp` | [GiraffeStateSelectedProjectApp](/build/type-aliases/GiraffeStateSelectedProjectApp) |
| `mapHoverCoords`     | [GiraffeStateMapHoverCoords](/build/type-aliases/GiraffeStateMapHoverCoords)         |
| `closingSignal`      | [GiraffeStateClosingSignal](/build/type-aliases/GiraffeStateClosingSignal)           |
| `uiLayout`           | [GiraffeStateUiLayout](/build/type-aliases/GiraffeStateUiLayout)                     |
| `appPanels`          | [GiraffeStateAppPanels](/build/type-aliases/GiraffeStateAppPanels)                   |
| `contextMenuClick`   | [GiraffeStateContextMenuClick](/build/type-aliases/GiraffeStateContextMenuClick)     |
| `views`              | [GiraffeStateViews](/build/type-aliases/GiraffeStateViews)                           |
| `mapboxEvent`        | [GiraffeStateMapboxEvent](/build/type-aliases/GiraffeStateMapboxEvent)               |
| `workspace`          | [GiraffeStateWorkspace](/build/type-aliases/GiraffeStateWorkspace)                   |
| `visibleScenarios`   | [GiraffeStateVisibleScenarios](/build/type-aliases/GiraffeStateVisibleScenarios)     |
| `mapCamera`          | [GiraffeStateMapCamera](/build/type-aliases/GiraffeStateMapCamera)                   |

## Related Types

- [GiraffeStateGet](/build/type-aliases/GiraffeStateGet) - Return types for `giraffeState.get()`
- [GiraffeStateAttr](/build/type-aliases/GiraffeStateAttr) - Union of all state attribute types
- [GiraffeStateAttrMap](/build/type-aliases/GiraffeStateAttrMap) - Object type with all state keys
- [GiraffeStateEventKey](/build/type-aliases/GiraffeStateEventKey) - Valid keys for state events