React Vehicle Loan Calculator

A customizable React component for vehicle loan calculations with amortization schedules, financing matrices, and printable proposals.

Features

• ✅ Fully Customizable - Pass your company branding, sales advisors, and default values as props
• ✅ TypeScript Support - Full type definitions included
• ✅ Responsive Design - Works on desktop, tablet, and mobile
• ✅ Print-Ready Proposals - Generate professional loan proposals
• ✅ Financing Matrix - Compare multiple loan terms, rates, and down payments
• ✅ Trade-In Support - Calculate trade-in credits and payoffs
• ✅ Fee Management - Customizable fees and charges
• ✅ Tailwind CSS Styled - Modern, beautiful UI out of the box

Installation

npm install react-vehicle-loan-calculator

Usage

Basic Example

import { VehicleCalculator } from 'react-vehicle-loan-calculator';
import 'react-vehicle-loan-calculator/dist/style.css';

function App() {
  return (
    <VehicleCalculator
      companyName="My Car Dealership"
      salesAdvisor="John Doe"
    />
  );
}

Full Example with All Options

import { VehicleCalculator } from 'react-vehicle-loan-calculator';
import 'react-vehicle-loan-calculator/dist/style.css';

function App() {
  return (
    <VehicleCalculator
      // Required props
      companyName="Premium Auto Sales"
      salesAdvisor="Jane Smith"
      
      // Optional company branding
      companyLogo="https://example.com/logo.png"
      companyEmail="[email protected]"
      companyAddress="123 Main Street"
      companyCityStateZip="New York, NY 10001"
      
      // Sales advisor dropdown options
      salesAdvisorList={['Jane Smith', 'Bob Johnson', 'Alice Williams']}
      
      // Default values
      defaultPurchasePrice={25000}
      defaultTaxRate={7.5}
      defaultLoanTerms={[24, 36, 48, 60]}
      defaultInterestRates={[5.99, 8.99, 12.99]}
      defaultFees={[
        { id: '1', name: 'Dealer Package', amount: 1000 },
        { id: '2', name: 'Finance Fee', amount: 500 },
        { id: '3', name: 'GAP Insurance', amount: 0 },
        { id: '4', name: 'Lender Fee', amount: 800 },
        { id: '5', name: 'Warranty', amount: 1979 },
      ]}
      
      // Custom styling
      className="my-custom-class"
    />
  );
}

Props

Required Props

| Prop | Type | Description | |------|------|-------------| | companyName | string | Your dealership/company name | | salesAdvisor | string | Default sales representative name |

Optional Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | companyLogo | string | - | URL to company logo (shows company name if not provided) | | companyEmail | string | '' | Company email address | | companyAddress | string | '' | Street address | | companyCityStateZip | string | '' | City, state, and ZIP code | | salesAdvisorList | string[] | [salesAdvisor] | List of sales advisors for dropdown | | defaultTaxRate | number | 5 | Default tax rate percentage | | defaultPurchasePrice | number | 14950 | Default purchase price | | defaultLoanTerms | number[] | [36, 48, 60] | Available loan terms in months | | defaultInterestRates | number[] | [9.99, 14.99, 19.99] | Interest rate options | | defaultFees | Fee[] | See below | Default fee structure | | className | string | '' | Additional CSS classes for root element |

Fee Type

interface Fee {
  id: string;
  name: string;
  amount: number;
}

Default Fees

[
  { id: '1', name: 'Dealer Package', amount: 799 },
  { id: '2', name: 'Finance Fee', amount: 500 },
  { id: '3', name: 'GAP', amount: 0 },
  { id: '4', name: 'Lender Fee (Approx.)', amount: 800 },
  { id: '5', name: 'Warranty', amount: 1979 },
]

TypeScript

This package includes TypeScript definitions. Import types as needed:

import { VehicleCalculatorProps, Fee, SelectedOption } from 'react-vehicle-loan-calculator';

Styling

The component uses Tailwind CSS for styling. The CSS is bundled with the component, so you just need to import it:

import 'react-vehicle-loan-calculator/dist/style.css';

License

MIT © Nikhil Lohar

Author

Nikhil Lohar