Package Exports
- react-credit-calculator
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-credit-calculator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
React Credit Calculator
Features
- Implementing simple credit calculators using React Context
- Written on Typescript
- Only function components and hooks
Installation
Using npm
npm i react-credit-calculator@^3.0Usage
import * as React from "react";
import * as Calculator from "react-credit-calculator";
const conditions: Calculator.ControllerProps = {
interestRate: 0.0175, // 1.75% per day
amount: {
min: 500,
max: 2000,
initial: 1000,
step: 50,
},
rate: {
min: 1,
max: 30,
initial: 7,
step: 1,
},
};
return (
<Calculator.Controller {...conditions}>
{/** Controls for amount */}
<Calculator.ControlWrapper type="amount">
<Calculator.Button>
Decrease
</Calculator.Button>
<Calculator.Input />
<Calculator.Button increase>
Increase
</Calculator.Button>
</Calculator.ControlWrapper>
{/** Controls for term */}
<Calculator.ControlWrapper type="term">
<Calculator.Button>
Decrease
</Calculator.Button>
<Calculator.Input />
<Calculator.Button increase>
Increase
</Calculator.Button>
</Calculator.ControlWrapper>
{/** Summary */}
<Calculator.Label type={"term"} />
<Calculator.Label type={"total"} />
<Calculator.DateLabel />
</Calculator.Controller>
);Using context manually:
import * as React from "react";
import * as Calculator from "react-credit-calculator";
return (
<Calculator.Controller>{/** Include props */}
<Calculator.Context.Consumer>
{(value) => console.log(value) /** do something */}
</Calculator.Context.Consumer>
</Calculator.Controller>
);see ContextValue for details.
Suggests
- react-credit-calculator-slider - rc-slider integration