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

``bash
npm install react-vehicle-loan-calculator
`

Usage

$3

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

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

$3

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

function App() {
return (
// Required props
companyName="Premium Auto Sales"
salesAdvisor="Jane Smith"

// Optional company branding
companyLogo="https://example.com/logo.png"
companyEmail="sales@premiumauto.com"
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

$3

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

$3

| 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 |

$3

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

$3

`typescript
[
{ 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:

`typescript
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:

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

License

MIT © Nikhil Lohar

Author

Nikhil Lohar