React Salt SDK

The React Salt SDK provides a set of reusable React components for building crypto-backed loan experiences. It covers two main use cases:

1. Loan Calculator — A configurable loan quote calculator that lets users select location, amount, term, and LTV to get real-time loan quotes
2. Loan Origination — A multi-step application flow for personal and business loans, including identity verification, document uploads, and payout configuration

It's intended to be used by SALT partners that have access to SALT's partner API.

Prerequisites

Before using the React Salt SDK, ensure you have:

• React 18+ or React 19+ installed in your project
• API credentials from SALT including:
  • API Key or JWT token provider
  • Base URL for the SALT partner API
• TypeScript support (recommended for better development experience)

Installation

1. Install the SDK package and its peer dependencies:

npm install @saltlending/react-sdk react react-dom

2. Import the required CSS styles in your main application file:

import "@saltlending/react-sdk/style.css";

Quick Start

1. Configure API Client and Context

Wrap your application with the ReactSdkContext provider:

import { ReactSdkContext } from "@saltlending/react-sdk/context";
import { ApiClient } from "@saltlending/react-sdk/api";
import "@saltlending/react-sdk/style.css";

// API Key authentication
const apiClient = new ApiClient(
  process.env.SALT_API_KEY,
  process.env.SALT_BASE_URL
);

// Or JWT Token authentication (required for origination flow)
const apiClient = new ApiClient(
  "",
  process.env.SALT_BASE_URL,
  "jwt-token",
  async () => {
    const res = await fetch("/auth/token");
    const data = await res.json();
    return { token: data.access_token, expiresAt: data.expires_at };
  }
);

function App() {
  return (
    <ReactSdkContext.Provider value={apiClient}>
      {/* Your components */}
    </ReactSdkContext.Provider>
  );
}

2. Build a Loan Calculator

import { useLoanCalculatorState } from "@saltlending/react-sdk/hooks";
import {
  LocationSelect,
  AmountInput,
  AccountTypeSelect,
  LoanQuotes,
  LoadingIndicator,
  NonLendableArea,
  RetriableError,
  SubmitButton,
} from "@saltlending/react-sdk/components";

function LoanCalculator() {
  const {
    getInputProps,
    stateValues: state,
    isLoading,
    refetchLoanBounds,
    isError,
  } = useLoanCalculatorState({
    defaultState: {
      accountType: "personal",
      amount: 10000,
      location: { countryCode: "US", sub: "CA" },
      repaymentType: "interest_only",
      baseLTV: 0.7,
      term: 12,
    },
  });

  return (
    <div>
      <LocationSelect label="Where do you live?" {...getInputProps("LocationSelect")} />
      <AmountInput label="How much?" placeholder="$ 0.00" {...getInputProps("AmountInput")} />
      <AccountTypeSelect label="Loan type" {...getInputProps("AccountTypeSelect")} />

      {isLoading ? (
        <LoadingIndicator />
      ) : isError ? (
        <RetriableError onClickRetry={refetchLoanBounds} />
      ) : state.isNonLendableArea ? (
        <NonLendableArea />
      ) : state.loanQuotes ? (
        <LoanQuotes {...getInputProps("LoanQuotes")} />
      ) : null}
    </div>
  );
}

3. Add a Loan Origination Flow

import { PersonalLoanFlow } from "@saltlending/react-sdk/components";

function LoanApplication() {
  return <PersonalLoanFlow accountId="account-123" />;
}

Or for business loans:

import { BusinessLoanFlow } from "@saltlending/react-sdk/components";

function BusinessLoanApplication() {
  return <BusinessLoanFlow accountId="account-456" />;
}

Available Components

Core Components (Loan Calculator)

• LocationSelect - Geographic location picker
• AmountInput - Loan amount input with validation
• AccountTypeSelect - Loan type selection (personal or business)
• LtvInput - Loan-to-Value ratio selector
• TermInput - Loan term duration selector
• LoanQuotes - Loan quote results with repayment type selection
• CountrySelect - Country-only dropdown (ISO 3166-1)
• SubmitButton - Action button with loading state
• LoadingIndicator, NonLendableArea, RetriableError, LegalityIssues - State displays

Form Components (Loan Origination)

• PersonalInformation, FinancialInformation - Personal loan forms
• BusinessEntityInformation, BusinessEntityQuestions, BusinessBeneficiaries - Business loan forms
• BusinessVerificationProof, BusinessAddressProof - Business document uploads
• AccountAddress, LendingQuestions, ResidencyInformation - Shared forms
• ConnectBankAccount, LoanPayout, DepositCollateral - Payout and collateral
• BankruptcySpecificationUpload - Conditional document upload

Flow Components

• PersonalLoanFlow - Complete personal loan application flow
• BusinessLoanFlow - Complete business loan application flow
• LoanFlow - Configurable base flow component

Hooks

• useLoanCalculatorState - Loan calculator state management
• useForm - Generic form state with declarative validation
• useOriginationFlow - Multi-step origination flow orchestration
• useDocuments - Document upload and management
• useAccountsProfiles - Account and profile CRUD
• useLoans - Loan operations and quote generation

Environment Variables

• SALT_API_KEY - Your SALT API key
• SALT_BASE_URL - The base URL for SALT's partner API

Component Documentation

For detailed component documentation and interactive examples, see the Storybook Documentation.