> ## Documentation Index
> Fetch the complete documentation index at: https://docs.story.foundation/llms.txt
> Use this file to discover all available pages before exploring further.

# Using the SDK in React

> Learn how to use the SDK in React once you have it set up.

Once you have the SDK set up in React, you can use it just as we describe in the [TypeScript SDK Guide](/developers/typescript-sdk/overview).

<CardGroup cols={2}>
  <Card title="React Quickstart" href="https://github.com/storyprotocol/react-quickstart" icon="thumbs-up">
    A working code example that shows setting up & calling TypeScript SDK functions in Next.js/React.
  </Card>

  <Card title="SDK Reference" href="/sdk-reference" icon="books">
    View the whole SDK reference, which shows examples and types for every function in our SDK.
  </Card>
</CardGroup>

## Prerequisites

1. Complete the [SDK setup in React](/developers/react-guide/setup/overview)

## Example

Here is an example of calling an SDK function in React, which will look the same for any function you use:

```jsx TestComponent.tsx theme={null}
import { custom, toHex } from 'viem';
import { useWalletClient } from "wagmi";
import { StoryClient, StoryConfig } from "@story-protocol/core-sdk";

// example of how you would now use the fully setup sdk

export default function TestComponent() {
  const { data: wallet } = useWalletClient();

  async function setupStoryClient(): Promise<StoryClient> {
    const config: StoryConfig = {
      wallet: wallet,
      transport: custom(wallet!.transport),
      chainId: "aeneid",
    };
    const client = StoryClient.newClient(config);
    return client;
  }

  async function registerIp() {
    const client = await setupStoryClient();
    const response = await client.ipAsset.registerIpAsset({
      nft: {
        type: 'mint',
        spgNftContract: '0xc32A8a0FF3beDDDa58393d022aF433e78739FAbc',
      },
      ipMetadata: {
        ipMetadataURI: "test-metadata-uri",
        ipMetadataHash: toHex("test-metadata-hash", { size: 32 }),
        nftMetadataURI: "test-nft-metadata-uri",
        nftMetadataHash: toHex("test-nft-metadata-hash", { size: 32 }),
      }
    });
    console.log(
      `Root IPA created at tx hash ${response.txHash}, IPA ID: ${response.ipId}`
    );
  }

  return (
    {/* */}
  )
}
```