Financial Calculators React

A collection of financial calculator components for React applications.

Installation

npm install financial-calculators-react

Available Calculators

The package provides the following calculators:

1. LumpsumSIPCalculator - Calculate the future value of a lumpsum investment combined with a Systematic Investment Plan (SIP).
2. RetirementCalculator - Calculate retirement corpus needed and monthly investments required based on expenses.
3. StepUpSIPCalculator - Calculate the future value of a SIP with annual step-up increments.

Usage

Basic Usage

import React from 'react';
import { LumpsumSIPCalculator } from 'financial-calculators-react';

const MyFinancialApp = () => {
  return (
    <div className="app">
      <h1>Financial Tools</h1>
      <LumpsumSIPCalculator />
    </div>
  );
};

export default MyFinancialApp;

Customizing Theme

All calculators accept a theme prop to customize the appearance:

import React from 'react';
import { RetirementCalculator } from 'financial-calculators-react';

const MyFinancialApp = () => {
  const customTheme = {
    primary: "#1E40AF",     // Main color
    secondary: "#3B82F6",   // Secondary color
    accent: "#DBEAFE",      // Accent color for highlights
    background: "#F8FAFC",  // Background color
    textPrimary: "#1F2937", // Primary text color
    textSecondary: "#6B7280" // Secondary text color
  };

  return (
    <div className="app">
      <h1>Retirement Planning</h1>
      <RetirementCalculator theme={customTheme} />
    </div>
  );
};

export default MyFinancialApp;

Important Note

This package requires you to provide implementations for the UI components used by the calculators. The following components need to be provided in your application:

• UI Components: CalculatorContainer, InputSection, ResultsSection, etc.
• UI Elements: InputField, SelectField, Button, ResultCard, etc.
• Chart Components: LineChart, BarChart, ChartToggle, ChartIcons
• Utility Components: ReportDialog, ReportOptions, etc.
• Utility Functions: formatCurrency, numberToWords, etc.
• Validation Functions: validateRequiredFields, validateNumericFields, etc.
• Report Generation: generateReport, downloadReport, sendReportViaWhatsApp

You can create a wrapper around this package that provides these implementations specific to your UI library of choice (Material-UI, Chakra UI, etc.).

License

MIT