Docs
Getting Started

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
1
npm 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
1
npm 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.
  • providers: 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
1
"use client";
2
import React from "react";
3

4
import { goerli } from "@starknet-react/chains";
5
import {
6
StarknetConfig,
7
publicProvider,
8
argent,
9
braavos,
10
useInjectedConnectors,
11
} from "@starknet-react/core";
12

13
export function StarknetProvider({ children }: { children: React.ReactNode }) {
14
const chains = [goerli];
15
const providers = [publicProvider()];
16
const { connectors } = useInjectedConnectors({
17
// Show these connectors if the user has no connector installed.
18
recommended: [
19
argent(),
20
braavos(),
21
],
22
// Hide recommended connectors if the user has any connector installed.
23
includeRecommended: "onlyIfNoConnectors",
24
// Randomize the order of the connectors.
25
order: "random"
26
});
27

28
return (
29
<StarknetConfig
30
chains={chains}
31
providers={providers}
32
connectors={connectors}
33
>
34
{children}
35
</StarknetConfig>
36
);
37
}

Wrap your app in the provider

Wrap your app in the provider just created.

src/app.tsx
1
import { StarknetProvider } from "@/components/starknet-provider";
2

3
export function App() {
4
return (
5
<StarknetProvider>
6
<YourApp />
7
</StarknetProvider>
8
);
9
}

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

app/layout.tsx
1
import { StarknetProvider } from "@/components/starknet-provider";
2

3
export default function RootLayout({ children }: { children: React.ReactNode }) {
4
return (
5
<html lang="en">
6
<body>
7
<StarknetProvider>
8
{children}
9
</StarknetProvider>
10
</body>
11
</html>
12
);
13
}

Using hooks

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