Home

Awesome

Starknet React

<p align="center"> <a href="https://www.npmjs.com/package/@starknet-react/core"> <img alt="@starknet-react/core" src="https://img.shields.io/npm/v/@starknet-react/core"> </a> <a href="https://github.com/apibara/starknet-react/actions/workflows/release.yml"> <img alt="Release Status" src="https://img.shields.io/github/actions/workflow/status/apibara/starknet-react/build.yml"> </a> <a href="https://www.github.com/apibara/starknet-react"> <img alt="MIT LICENSE" src="https://img.shields.io/github/license/apibara/starknet-react"> </a> </p>

Starknet React is a collection of React hooks for Starknet. It is inspired by wagmi, powered by starknet.js.

Documentation

Documentation, including demos, is available online.

Getting Started

  1. Add @starknet-react/chains and @starknet-react/core to your dependencies.
pnpm add @starknet-react/chains @starknet-react/core

You also need to add get-starknet-core and starknet to your dependencies.

pnpm add get-starknet-core starknet
  1. Wrap your app with StarknetConfig
import { sepolia } from "@starknet-react/chains";
import {
  StarknetConfig,
  publicProvider,
  argent,
  braavos,
} from "@starknet-react/core";

function App() {
  const chains = [sepolia];
  const provider = publicProvider();
  const connectors = [braavos(), argent()];

  return (
    <StarknetConfig chains={chains} provider={provider} connectors={connectors}>
      <YourApp />
    </StarknetConfig>
  );
}
  1. Access the hooks from your components.
import { useAccount } from "@starknet-react/core";

function YourComponent() {
  const { address } = useAccount();

  return <div>gm {address}</div>;
}

License

This library is licensed under the MIT license.