Getting Started ​

Overview ​

Khizab is a React Hooks library for Aptos. You can learn more about the rationale behind the project in the Why Khizab section.

Automatic Installation ​

For new projects, it is recommended to set up your Khizab app using the create-khizab command line interface (CLI). This will create a new Khizab project using TypeScript and install the required dependencies.

pnpm create khizab

pnpm create khizab

npm create khizab@latest

npm create khizab@latest

yarn create khizab

yarn create khizab

bun create khizab

bun create khizab

Once the command runs, you'll see some prompts to complete.

Project name: khizab-project
Select a framework: React / Vanilla
...

Project name: khizab-project
Select a framework: React / Vanilla
...

After the prompts, create-khizab will create a directory with your project name and install the required dependencies. Check out the README.md for further instructions (if required).

Manual Installation ​

To manually add Khizab to your project, install the required packages.

pnpm add khizab @aptos-labs/[email protected] @tanstack/react-query

pnpm add khizab @aptos-labs/[email protected] @tanstack/react-query

npm install khizab @aptos-labs/[email protected] @tanstack/react-query

npm install khizab @aptos-labs/[email protected] @tanstack/react-query

yarn add khizab @aptos-labs/[email protected] @tanstack/react-query

yarn add khizab @aptos-labs/[email protected] @tanstack/react-query

bun add khizab @aptos-labs/[email protected] @tanstack/react-query

bun add khizab @aptos-labs/[email protected] @tanstack/react-query

• Aptos Sdk is an SDK for accessing the Aptos blockchain data, submitting transactions, and more!.
• TanStack Query is an async state manager that handles requests, caching, and more.
• TypeScript is optional, but highly recommended. Learn more about TypeScript support.

Create Config ​

Create and export a new Khizab config using createConfig.

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

In this example, Khizab is configured to use the testnet network, and petra connector. Check out the createConfig docs for more configuration options.

ts
import { useBlockByHeight } from 'khizab'
 
useBlockByHeight({ 
  height: 359251780,
  withTransactions: true
})
 
declare module 'khizab' {
  interface Register {
    config: typeof config
  }
}

ts
import { useBlockByHeight } from 'khizab'
 
useBlockByHeight({ 
  height: 359251780,
  withTransactions: true
})
 
declare module 'khizab' {
  interface Register {
    config: typeof config
  }
}

Wrap App in Context Provider ​

Wrap your app in the KhizabProvider React Context Provider and pass the config you created earlier to the value property.

import { KhizabProvider } from 'khizab' 
import { config } from './config' 

function App() {
  return (
    <KhizabProvider config={config}> 
      {/** ... */} 
    </KhizabProvider> 
  )
}

import { KhizabProvider } from 'khizab' 
import { config } from './config' 

function App() {
  return (
    <KhizabProvider config={config}> 
      {/** ... */} 
    </KhizabProvider> 
  )
}

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

Check out the KhizabProvider docs to learn more about React Context in Khizab.

Setup TanStack Query ​

Inside the KhizabProvider, wrap your app in a TanStack Query React Context Provider, e.g. QueryClientProvider, and pass a new QueryClient instance to the client property.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
import { KhizabProvider } from 'khizab'
import { config } from './config'

const queryClient = new QueryClient() 

function App() {
  return (
    <KhizabProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/** ... */} 
      </QueryClientProvider> 
    </KhizabProvider>
  )
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 
import { KhizabProvider } from 'khizab'
import { config } from './config'

const queryClient = new QueryClient() 

function App() {
  return (
    <KhizabProvider config={config}>
      <QueryClientProvider client={queryClient}> 
        {/** ... */} 
      </QueryClientProvider> 
    </KhizabProvider>
  )
}

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

Check out the TanStack Query docs to learn about the library, APIs, and more.

Use Khizab ​

Now that everything is set up, every component inside the Khizab and TanStack Query Providers can use Khizab React Hooks.

import { useAccount } from 'khizab'

function Profile() {
  const { address } = useAccount()
  const {data, error, isPending } = useGetAccountInfo({accountAddress: address?.address! })
  if (status === 'pending') return <div>Loading Account Info</div>
  if (status === 'error')
    return <div>Error fetching Account Info: {error.message}</div>
  return <div>Sequence Number: {data.sequence_number}</div>
}

import { useAccount } from 'khizab'

function Profile() {
  const { address } = useAccount()
  const {data, error, isPending } = useGetAccountInfo({accountAddress: address?.address! })
  if (status === 'pending') return <div>Loading Account Info</div>
  if (status === 'error')
    return <div>Error fetching Account Info: {error.message}</div>
  return <div>Sequence Number: {data.sequence_number}</div>
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { KhizabProvider } from 'khizab'
import { config } from './config'

const queryClient = new QueryClient()

function App() {
  return (
    <KhizabProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/** ... */}
      </QueryClientProvider>
    </KhizabProvider>
  )
}

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { KhizabProvider } from 'khizab'
import { config } from './config'

const queryClient = new QueryClient()

function App() {
  return (
    <KhizabProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {/** ... */}
      </QueryClientProvider>
    </KhizabProvider>
  )
}

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

import { createConfig } from 'khizab'
import { testnet } from 'khizab/networks'
import { petraWallet } from 'khizab/connectors'

export const config = createConfig({
  network: testnet,
  connectors: [petraWallet()],
})

Next Steps ​

For more information on what to do next, check out the following topics.

• TypeScript Learn how to get the most out of Khizab's type-safety and inference for an enlightened developer experience.
• Connect Wallet Learn how to enable wallets to connect to and disconnect from your apps and display information about connected accounts.
• React Hooks Browse the collection of React Hooks and learn how to use them.
• Aptos Sdk Learn about Aptos Sdk and how it works with Khizab.