react-credit-calculator-discount
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

React Credit Calculator Discount

This package allows you to control interest rate/amount for your calculator from base package with discounts.

Installation

npm i --save react-credit-calculator@^2 react-credit-calculator-discount

Usage

  1. Put Discount controller after your calculator controller
import * as React from "react";
import * as Calculator from "react-credit-calculator";
import * as Discount from "react-credit-calculator-discount";
 
export class Layout extends React.Component {
    public render() {
        return (
            <Calculator.Controller>
                <Discount.Controller>
                    {/* ... */}
                </Discount.Controller>
            </Calculator.Controller>
        )
    }
}

If discount will be put into discount controller, your target interest rate/amount will change. You will also able to receive all actual discounts.

2. Use Discount control and Discount button to control specific discounts

import * as React from "react";
import * as Calculator from "react-credit-calculator";
import * as Discount from "react-credit-calculator-discount";
 
export class Layout extends React.Component {
    public render() {
        return (
            <Calculator.Controller>
                <Discount.Controller>
                    <Discount.Control type="discountType" rate={0.5}>
                        <Discount.Button {...buttonProps}>
                            Activate/deactivate discount with type "discountType"
                        </Discount.Button>
                    </Discount.Control>
                </Discount.Controller>
            </Calculator.Controller>
        )
    }
}

This example shows how to append/remove discount with type "discountType" and rate = 0.5 on button click. Discount will be either appended or removed, depending on whether it is active. You can combine different discount types. You can receive active discounts in Discount controller context consumer.

import * as React from "react";
import * as Discount from "react-credit-calculator-discount";
 
export const ActiveDiscountsLabel = () => (
    <Discount.Context.Consumer>
        {(context: Discount.ContextValue) => (
            <>
                {
                    Object.keys(context.discounts).map((type=> (
                        <React.Fragment key={type}>
                            <p>Type{type}</p>
                            <p>Discount amount{context.discounts[type].amount}</p>
                            <p>Discount rate{context.discounts[type].rate}</p>
                        </React.Fragment>
                    ))
                }
                <p>
                    Total discount amount:
                    {Object.values(context.discounts).reduce((carry, current=> carry + current.amount, 0)}
                </p>
                <p>
                    Total discount rate:
                    {Object.values(context.discounts).reduce((carry, current=> carry + current.rate, 0)}
                </p>
            </>
        )}
    </Discount.Context.Consumer>
)

Readme

Keywords

none

Package Sidebar

Install

npm i react-credit-calculator-discount

Weekly Downloads

1

Version

2.0.0

License

MIT

Unpacked Size

35.8 kB

Total Files

19

Last publish

Collaborators

  • horat1us