Skip to content

Getting Started

Overview

Starknet React is a collection of React hooks for Starknet. It combines the following packages:

Setup

Installation

Start by installing Starknet React.

npm
npm add @starknet-react/chains @starknet-react/core

Configure the provider

The next step is to configure the Starknet provider. You need to configure the following:

  • chains: a list of chains supported by your dapp.
  • provider: the JSON-RPC provider you want to use.
  • connectors: the wallet connectors supported by your dapp. See the wallets page for more information.

Starknet React provides the useInjectedConnectors hook to merge a static list of recommended connectors with a dynamic list of injected connectors.

components/starknet-provider.tsx
"use client";
import React from "react";
 
import { sepolia, mainnet } from "@starknet-react/chains";
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
  useInjectedConnectors,
  voyager
} from "@starknet-react/core";
 
export function StarknetProvider({ children }: { children: React.ReactNode }) {
  const { connectors } = useInjectedConnectors({
    // Show these connectors if the user has no connector installed.
    recommended: [
      argent(),
      braavos(),
    ],
    // Hide recommended connectors if the user has any connector installed.
    includeRecommended: "onlyIfNoConnectors",
    // Randomize the order of the connectors.
    order: "random"
  });
 
  return (
    <StarknetConfig
      chains={[mainnet, sepolia]}
      provider={publicProvider()}
      connectors={connectors}
      explorer={voyager}
    >
      {children}
    </StarknetConfig>
  );
}

Wrap your app in the provider

Wrap your app in the provider just created.

app.tsx
import { StarknetProvider } from "@/components/starknet-provider";
 
export function App() {
  return (
    <StarknetProvider>
      <YourApp />
    </StarknetProvider>
  );
}

Notice that if you are using Next.js app routes, you should place the provider in the root layout file.

app/layout.tsx
import { StarknetProvider } from "@/components/starknet-provider";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <StarknetProvider>
          {children}
        </StarknetProvider>
      </body>
    </html>
  );
}

Using hooks

You can now use the Starknet React hooks from any component wrapped by the root provider!