Integration with
React

Complete guide to integrate DXBNK into React applications. Learn to use our custom hooks, pre-built components and official SDK.

6

Detailed Steps

1h

Total Time

100%

TypeScript

React 18+

Compatible

Integration Steps

Follow these 6 steps to integrate DXBNK into your React application

Paso 1: SDK Installation

Install and configure DXBNK SDK for React

5 min
Easy

Overview

The first step to integrate DXBNK into your React application is to install our official SDK. The SDK includes custom hooks, pre-built components and utilities to facilitate integration.

Instructions

  1. 1Open your terminal in your React project directory
  2. 2Run the installation command: npm install @dxbnk/react-sdk
  3. 3Install additional dependencies: npm install axios react-query
  4. 4Verify installation by checking package.json
  5. 5Import the SDK into your main file

Tips

  • Make sure you have Node.js 16+ installed
  • The SDK is compatible with React 17+ and 18+
  • Includes TypeScript definitions automatically

Code Example

# Instalar el SDK de DXBNK
npm install @dxbnk/react-sdk axios react-query

# O usando yarn
yarn add @dxbnk/react-sdk axios react-query

# O usando pnpm
pnpm add @dxbnk/react-sdk axios react-query

Paso 2: Provider Configuration

Configure the DXBNKProvider in your application

3 min
Easy

Paso 3: User Authentication

Implement login and user registration

10 min
Intermediate

Paso 4: Wallet Management

Create and manage cryptocurrency wallets

15 min
Intermediate

Paso 5: Transactions and Payments

Implement sending and receiving transactions

20 min
Advanced

Paso 6: Advanced Components

Use DXBNK's pre-built components

15 min
Intermediate

SDK Features

Everything you need to build DeFi applications with React

Custom hooks for all operations
Pre-built and customizable components
Full TypeScript support
Automatic loading and error state handling
Integration with React Query for smart caching
WebSockets for real-time updates
Integrated form validation
Support for multiple wallets and cryptocurrencies

Main Hooks

Quick examples of the most used hooks

useAuth Hook

Handles user authentication

const { user, login, logout, isLoading } = useAuth();

useWallets Hook

Manages user wallets

const { wallets, createWallet, deleteWallet } = useWallets();

useTransactions Hook

Handles transactions

const { transactions, sendTransaction } = useTransactions();

useBalance Hook

Gets real-time balances

const { balance, refreshBalance } = useBalance(walletId);

Need help with integration?

Check our complete documentation or contact our support team for personalized help.

View Complete Documentation