React SDK

Build powerful tax and finance experiences with React hooks and pre-built components from Taxu.

What is the Taxu React SDK?

The Taxu React SDK is a collection of React hooks and pre-built components designed to make building tax and financial applications effortless. With built-in state management, error handling, and loading states, it provides a declarative API that feels natural to React developers.

Perfect for modern React applications using Next.js, Create React App, or Vite, the React SDK enables developers to build sophisticated tax filing interfaces, calculation tools, and document management systems with minimal code. It handles the complexity of API calls, state synchronization, and error recovery so you can focus on building great user experiences.

Ideal For:

• Next.js and Create React App projects
• Single-page applications (SPAs)
• Progressive web apps (PWAs)
• Tax and finance dashboards

React Benefits:

• Custom React hooks for state
• Pre-built UI components
• Automatic error handling
• TypeScript support included

v2.1.0

React 18+

Installation

npm

npm install @taxu/react

Setup

Wrap your app with the TaxuProvider:

import { TaxuProvider } from '@taxu/react';

function App() {
  return (
    <TaxuProvider apiKey="your_publishable_key">
      <YourApp />
    </TaxuProvider>
  );
}

Hooks

useTaxCalculation

function TaxCalculator() {
  const { calculate, result, loading, error } = useTaxCalculation();

  const handleCalculate = async () => {
    await calculate({
      income: 75000,
      filingStatus: 'single'
    });
  };

  return (
    <div>
      <button onClick={handleCalculate} disabled={loading}>
        Calculate Tax
      </button>
      {result && <p>Tax Owed: ${result.totalTax}</p>}
    </div>
  );
}

useFilings

function FilingsList() {
  const { filings, loading, error, refetch } = useFilings();

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {filings.map(filing => (
        <div key={filing.id}>
          {filing.formType} - {filing.status}
        </div>
      ))}
    </div>
  );
}

Pre-built Components

TaxFormUploader

function UploadPage() {
  return (
    <TaxFormUploader
      formType="w2"
      taxYear={2024}
      onSuccess={(document) => {
        console.log('Uploaded:', document.id);
      }}
    />
  );
}