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

_10
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

_10
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.
  • 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";
_37
import React from "react";
_37
_37
import { goerli } from "@starknet-react/chains";
_37
import {
_37
StarknetConfig,
_37
publicProvider,
_37
argent,
_37
braavos,
_37
useInjectedConnectors,
_37
} from "@starknet-react/core";
_37
_37
export function StarknetProvider({ children }: { children: React.ReactNode }) {
_37
const chains = [goerli];
_37
const provider = publicProvider();
_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={chains}
_37
provider={provider}
_37
connectors={connectors}
_37
>
_37
{children}
_37
</StarknetConfig>
_37
);
_37
}

Wrap your app in the provider

Wrap your app in the provider just created.

src/app.tsx

_10
import { StarknetProvider } from "@/components/starknet-provider";
_10
_10
export 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

_13
import { StarknetProvider } from "@/components/starknet-provider";
_13
_13
export 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!