---
layout: home
hero:
  name: Giraffe SDK
  tagline: Documentation for the Giraffe iframe SDK
  actions:
    - theme: brand
      text: GiraffeState
      link: /state
    - theme: alt
      text: RPC Functions
      link: /functions
---

# Read From Giraffe

Iframes can listen to data from the parent Giraffe window using [GiraffeState](/state).

```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
import { useGiraffeState } from '@gi-nx/iframe-sdk-react';

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

# Commands / Functions

[RPC Functions](/functions) can be invoked via the postmessage SDK.

```ts
import { rpc } from '@gi-nx/iframe-sdk';
rpc.invoke('setTiles', [sourceId, newTiles]);
```