React Hooks Example: Timer

Simple React Hooks example. A timer that pauses when you hold the mouse button. Creates and uses a custom Hook.

by Florian Bar

HTML

<div id="app"></div>

CSS

.timer {
  padding: 20px;
  font-size: 40px;
}

React

// Custom Hook: useMousePressed

const ASSURANCE_PREMIUM = 1700;
const SERVICE_FEE = 69;
const INSURANCE_PREMIUM = 408;
const INTEREST_RATE = 7.5;
const MONTHLY_REPAYMENT = 11300;

function Timer () {
  const [currentBondDebt, setCurrentBondDebt] = React.useState(1002900);  
  const [extraPayment, setExtraPayment] = React.useState(9000);  
  const [annualIncrease, setAnnualIncrease] = React.useState(2000);  
  const [annualBonus, setAnnualBonus] = React.useState(10000);  
  const [paymentCount, setPaymentCount] = React.useState(2);  
  const [year, setYear] = React.useState(2022);

/* React.useEffect(function () {
    while (currentBondDebt >= 0) {
        if (paymentCount !== 0 && paymentCount % 12 === 0) {
          setExtraPayment(extraPayment + annualIncrease);
          setCurrentBondDebt(currentBondDebt - annualBonus);
            setYear(year+1);
          console.log(year, "R " + parseInt(currentBondDebt));
      }
  
      setPaymentCount(paymentCount+1);
  
        const monthlyInterest = (INTEREST_RATE / 100 / 12) * currentBondDebt;
        const payment = MONTHLY_REPAYMENT - ASSURANCE_PREMIUM - SERVICE_FEE - INSURANCE_PREMIUM - monthlyInterest / 2;
  
      setCurrentBondDebt(currentBondDebt - payment - extraPayment);  
  }
  }, []); */

  return (
  	<div>
      <table>
      <tbody>
        <tr>
          <td>Current Bond Debt:</td>
          <td>
            <input value={currentBondDebt} type="number" onChange={event => setCurrentBondDebt(event.target.value)} />
          </td>
        </tr>
        <tr>
          <td>Extra Payment:</td>
          <td>
            <input value={extraPayment} type="number" onChange={event => setExtraPayment(event.target.value)} />
          </td>
        </tr>
        <tr>
          <td>Annual Increase:</td>
          <td>
            <input value={annualIncrease} type="number" onChange={event => setAnnualIncrease(event.target.value)} />
          </td>
        </tr>
        <tr>
          <td>Annual Bonus:</td>
  ...