useCounter

import { useCounter } from "rooks";

export default function App() {
  const { value, increment, decrement, incrementBy, decrementBy, reset } =
    useCounter(3);

  function incrementBy5() {
    incrementBy(5);
  }
  function decrementBy7() {
    decrementBy(7);
  }

  return (
    <>
      Current value is {value}
      <hr />
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={incrementBy5}>incrementBy5</button>
      <button onClick={decrementBy7}>decrementBy7</button>
      <hr />
      <button onClick={reset}>reset</button>
    </>
  );
}

import { useCounter } from "rooks";

export default function CounterWithReset() {
  const { value, incrementBy, decrementBy, reset } = useCounter(10);

  return (
    <div>
      <div>Current value: {value}</div>
      <button onClick={() => incrementBy(10)}>Add 10</button>
      <button onClick={() => decrementBy(4)}>Subtract 4</button>
      <button onClick={reset}>Reset to 10</button>
    </div>
  );
}