0.0.12 • Published 3 years ago
@softloans.io/react-loan-calculator v0.0.12
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 | - |