Lumpsum + SIP Calculator

A React component for calculating the future value of combined lumpsum and SIP investments with customizable theming.

Installation

npm install @springmoney/lumpsum-sip-calculator

Usage

import { LumpsumSIPCalculator } from '@springmoney/lumpsum-sip-calculator';

// Basic usage
function App() {
  return <LumpsumSIPCalculator />;
}

// With custom theme
function App() {
  const customTheme = {
    primary: "#1a73e8",
    secondary: "#4285f4",
    accent: "#e8f0fe",
    background: "#ffffff",
    textPrimary: "#202124",
    textSecondary: "#5f6368"
  };

  return <LumpsumSIPCalculator theme={customTheme} />;
}

Theme Customization

The calculator accepts a theme prop that allows you to customize its appearance. The theme object can include the following properties:

interface CalculatorTheme {
  primary: string;    // Primary color for buttons and headings
  secondary: string;  // Secondary color for hover states
  accent: string;     // Background color for results section
  background: string; // Main background color
  textPrimary: string;   // Primary text color
  textSecondary: string; // Secondary text color
}

Features

• Calculate future value of combined lumpsum and SIP investments
• Customizable compounding frequency for lumpsum investment
• Input validation with error messages
• Responsive design
• Customizable theming
• TypeScript support

Props

| Prop | Type | Required | Description | |-------|------|----------|-------------| | theme | Partial | No | Custom theme object to override default styling |

License

MIT