Docs
Getting started

Getting started

@micro-stacks/react is a collection of React Hooks containing everything you need to start working with Stacks. This package makes it easy to connect to a Stacks wallet, sign messages, interact with clarity smart contracts, and much more!

Installation

💡

You can quickly create a new micro-stacks based app with this command: npx create-ustx or with your package manager of choice:

pnpm create ustx
pnpm i @micro-stacks/react

Setting up the client

To add @micro-stacks/react to your application, we only need to import the ClientProvider and pass it some details about your app: appName and appIconUrl. This component creates the React Context that all other functions within this package make use of.

import * as MicroStacks from '@micro-stacks/react';
 
// your app
function App() {
  return (
    <MicroStacks.ClientProvider
      appName="My sick app"
      appIconUrl="APP_ICON.png"
    >
      <Router />
    </MicroStacks.ClientProvider>
  );
}
 
export default App;
💡

Please note: if the app needs to interact with a Stacks wallet, appName and appIconUrl are required.

Parameters

The client can take a number of additional options:

onAuthentication

An optional callback that fires when authentication is completed successfully.

onSignOut

An optional callback that fires when a session is cleared. Useful if building a server-side rendered app.

network

Change the default network for the app. Available options: mainnet, testnet, new StacksNetwork().

💡

You can read more about networks in Stacks apps on the Networks page.

storage

You can pass a custom storage driver for the state of the client. Defaults to localStorage.

interface Storage {
  getItem: <Value = V>(key: string, defaultValue?: Value | null) => Value | null;
  setItem: <Value>(key: string, value: Value | null) => void;
  removeItem: (key: string) => void;
}

onPersistState

A callback to persist an instance of the client state as a dehydrated string value. Read more about persistence on the Advanced Patterns page.

dehydratedState

A string value of the dehydrated state of the client for hydration. Or a function that returns the value: (key: string) => string | undefined Read more about persistence on the Advanced Patterns page.

Using the client

Now that you've set up your app, feel free to dig into some of the features you can start making use of:

Helpful guides

Networks