Starknet React

Docs

Getting Started

Using `create-starknet`

The fastest way to get started using Starknet React is by using the create-starknet Command Line Interface (CLI). The tool will guide you through setting up your Starknet application.

npm

pnpm

yarn


_10npm init starknet

Once the command finishes running, you can start the development server.

Manual setup

Installation

Add Starknet React and its dependencies to your project.

npm

pnpm

yarn


_10npm install @starknet-react/chains @starknet-react/core starknet get-starknet-core

Configure the Starknet 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. See the providers page for more information.
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


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

Wrap your app in the provider

Wrap your app in the provider just created.

src/app.tsx


_10import { StarknetProvider } from "@/components/starknet-provider";
_10
_10export function App() {
_10  return (
_10    <StarknetProvider>
_10      <YourApp />
_10    </StarknetProvider>
_10  );
_10}

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

app/layout.tsx


_13import { StarknetProvider } from "@/components/starknet-provider";
_13
_13export default function RootLayout({ children }: { children: React.ReactNode }) {
_13  return (
_13    <html lang="en">
_13      <body>
_13        <StarknetProvider>
_13          {children}
_13        </StarknetProvider>
_13      </body>
_13    </html>
_13  );
_13}

Using hooks

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