# Flare for React Devs

> Learn how to interact with Flare using React and Wagmi.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown versions of documentation pages are available by appending `.md` to the page URL.

Source: https://dev.flare.network/network/guides/flare-for-react-developers

This guide is for React developers who want to interact with Flare using [Wagmi](https://wagmi.sh/) and the [`@flarenetwork/flare-wagmi-periphery-package`](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package).

The package provides two ways to read and write Flare contracts:

- **Generic hooks:** use Wagmi's [`useReadContract`](https://wagmi.sh/react/api/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
- **Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.

In this guide, you will set up a React project, configure Wagmi for Flare, and query the [`WNat`](/network/solidity-reference/IWNat) contract address from the [`FlareContractRegistry`](/network/solidity-reference/IFlareContractRegistry) using both approaches.

## Prerequisites

- [Node.js](https://nodejs.org/) (v18 or later)
- `npm` package manager

## Setting up the project

Scaffold a new React + TypeScript project using [Vite](https://vite.dev/):

```bash
npm create vite@latest my-flare-app -- --template react-ts
cd my-flare-app
```

Install the Wagmi, Viem, TanStack Query, and the [Flare Wagmi periphery package](https://www.npmjs.com/package/@flarenetwork/flare-wagmi-periphery-package):

```bash
npm install wagmi viem @tanstack/react-query @flarenetwork/flare-wagmi-periphery-package
```

## Configure Wagmi for Flare

Create a `wagmi.config.ts` file in the `src` directory to define the Wagmi configuration with Flare networks:

```typescript title="wagmi.config.ts"

  chains: [flare, flareTestnet],
  connectors: [injected()],
  transports: {
    [flare.id]: http(),
    [flareTestnet.id]: http(),
  },
});
```

Wrap your application with the required providers in `src/main.tsx`:

```typescript title="src/main.tsx"

const queryClient = new QueryClient();

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>

      </QueryClientProvider>
    </WagmiProvider>
  </StrictMode>,
);
```

## Query contract data

The example below queries the [`FlareContractRegistry`](/network/solidity-reference/IFlareContractRegistry) to look up the [`WNat`](/network/solidity-reference/IWNat) contract address.

It demonstrates both approaches to query the contract data:

- **Generic hooks:** use Wagmi's [`useReadContract`](https://wagmi.sh/react/api/hooks/useReadContract) with typed ABIs imported from the Flare Wagmi Periphery package.
- **Contract-specific hooks:** use auto-generated hooks like `useReadIFlareContractRegistry` that already know the ABI.

```typescript title="src/WNatQuery.tsx"
import {
  useReadIFlareContractRegistry,
  iFlareContractRegistryAbi,
} from "@flarenetwork/flare-wagmi-periphery-package/contracts/flare";

// The Flare Contract Registry address
const FLARE_CONTRACTS_REGISTRY =
  "0xaD67FE66660Fb8dFE9d6b1b4240d8650e30F6019" as const;

  // Generic useReadContract with ABI
  const {
    data: wNatAddressGeneric,
    isLoading: isLoadingGeneric,
    error: errorGeneric,
  } = useReadContract({
    address: FLARE_CONTRACTS_REGISTRY,
    abi: iFlareContractRegistryAbi,
    functionName: "getContractAddressByName",
    args: ["WNat"],
  });

  // Contract-specific hook
  const {
    data: wNatAddressSpecific,
    isLoading: isLoadingSpecific,
    error: errorSpecific,
  } = useReadIFlareContractRegistry({
    address: FLARE_CONTRACTS_REGISTRY,
    functionName: "getContractAddressByName",
    args: ["WNat"],
  });

  return (
    <div>
      <h1>WNat Contract Query</h1>

      <h2>Generic Hook with ABI</h2>
      <p>
        Uses Wagmi's generic <code>useReadContract</code> hook with{" "}
        <code>iFlareContractRegistryAbi</code> imported from the package.
      </p>
      {isLoadingGeneric && <p>Loading...</p>}
      {errorGeneric && <p>Error: {errorGeneric.message}</p>}
      {wNatAddressGeneric && <p>{wNatAddressGeneric as string}</p>}

      <h2>Contract-Specific Hook</h2>
      <p>
        Uses <code>useReadIFlareContractRegistry</code>, a pre-typed hook
        generated for the contract. No ABI import needed.
      </p>
      {isLoadingSpecific && <p>Loading...</p>}
      {errorSpecific && <p>Error: {errorSpecific.message}</p>}
      {wNatAddressSpecific && <p>{wNatAddressSpecific as string}</p>}
    </div>
  );
}
```

## Run the app

Update `src/App.tsx` to render the `WNatQuery` component:

```typescript title="src/App.tsx"
import "./App.css";

function App() {
  return (
    <div>

    </div>
  );
}

```

Start the development server:

```bash
npm run dev
```

Open the URL shown in the terminal.

The app will query the [`FlareContractRegistry`](/network/solidity-reference/IFlareContractRegistry) and display the [`WNat`](/network/solidity-reference/IWNat) contract address using both approaches.

### Generic hooks

The generic approach uses the [`useReadContract`](https://wagmi.sh/react/api/hooks/useReadContract) hook from Wagmi.
You import the typed ABI (`iFlareContractRegistryAbi`) from the package and pass it as the `abi` prop.
This gives you complete type safety for `functionName` and `args`.

```typescript

const { data } = useReadContract({
  address: FLARE_CONTRACTS_REGISTRY,
  abi: iFlareContractRegistryAbi,
  functionName: "getContractAddressByName",
  args: ["WNat"],
});
```

### Contract-specific hooks

The package also exports auto-generated hooks named after each contract.
Instead of passing an `abi` prop, you call the contract-specific hook directly.
The hook already knows the ABI, so you only need to provide `address`, `functionName`, and `args`.

```typescript

const { data } = useReadIFlareContractRegistry({
  address: FLARE_CONTRACTS_REGISTRY,
  functionName: "getContractAddressByName",
  args: ["WNat"],
});
```

## Choosing an approach

|                 | Generic hooks                                                    | Contract-specific hooks                           |
| --------------- | ---------------------------------------------------------------- | ------------------------------------------------- |
| **Import**      | `useReadContract` from Wagmi + ABI from package                  | `useReadIFlareContractRegistry` etc. from package |
| **ABI prop**    | Required — pass the imported ABI                                 | Not needed — baked into the hook                  |
| **Type safety** | Full, via ABI generic                                            | Full, via generated hook signature                |
| **Best for**    | Mixing contracts in one component, using ABIs with viem directly | Concise code when working with a single contract  |

## Available exports

The package provides you with typed ABIs and contract-specific hooks for all Flare periphery contracts, organized by network.

To work with [Flare Time Series Oracle (FTSO)](/ftso/overview) contracts, you can import them using both approaches in the following ways:

```typescript
// Generic: import ABIs for use with useReadContract / useWriteContract

// Contract-specific: import auto-generated hooks
import {
  useReadIFtso,
  useWriteIiFtso,
} from "@flarenetwork/flare-wagmi-periphery-package/contracts/<network>";
```

Where `<network>` is one of:

- `flare`
- `songbird`
- `coston`
- `coston2`.

:::tip[What's next?]

- Explore the [Network Configuration](/network/overview#configuration) for RPC endpoints and chain details.
- Learn how to use the [Hardhat & Foundry Starter Kit](/network/guides/hardhat-foundry-starter-kit) to deploy and interact with Flare contracts.

:::