react-loan-calculator

The react-loan-calculator component is targeted for integrations into the React applications developed by the Softloans integration partners.

Dependencies

• React 18+

• rc-slider

  npm i rc-slider

Installation

To add the react-loan-calculator component to your React project:

npm i "@softloans.io/react-loan-calculator"

Sample Usage

Now you can use the react-loan-calculator component as shown below:

import {
  ReactLoanCalculator,
  LoanPurposeOptions,
  LoanPurpose,
} from "@softloans.io/react-loan-calculator";

function App() {
  const submitLoanCalculator = (loan: {
    loanFrom: number;
    loanTo: number;
    loanPurpose: LoanPurpose;
    months: number;
  }) => {
    console.log(loan);
  };

  return (
    <div className="App">
      <ReactLoanCalculator
        loanMin={200}
        loanMax={9000}
        loanFrom={2000}
        loanTo={4000}
        loanPurposeOptions={LoanPurposeOptions.All}
        loanPurpose={LoanPurpose.Marketing}
        monthsMin={2}
        monthsMax={12}
        monthsDefault={6}
        submitLoanCalculator={submitLoanCalculator}
      ></ReactLoanCalculator>
    </div>
  );
}

Options

| Prop | Description | Type | Default | | -------------------- | ----------------------------------------------- | --------------------------------------------------------------------------------------------- | --------------------- | | loanMin | Minimum value for loan range | number | 250 | | loanMax | Maximum value for loan range | number | 8000 | | loanFrom | Default floor value for loan | number | 1900 | | loanTo | Default ceiling value for loan | number | 4100 | | loanPurposeOptions | 'All', 'MarketingOnly' or 'InventoryOnly' | LoanPurposeOption | LoanPurposeOption.All | | loanPurpose | Default loan purpose;'Marketing' or 'Inventory' | LoanPurpose | LoanPurpose.Marketing | | monthsMin | Minimum value for loan period range | number | 2 | | monthsMax | Maximum value for loan period range | number | 12 | | monthsDefault | Default value for loan period range | number | 9 | | submitLoanCalculator | Action to execute on submit | (loan: {loanFrom: number; loanTo: number; loanPurpose: LoanPurpose; months: number;}) => void | - |