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.0

Usage

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

Contributors

• Alexander Letnikow

License

MIT