use-incremental-state v1.0.7

use-incremental-state

use-incremental-state is an npm package that provides a React hook based on useState to allow for easy management of incremental state variables. This package is useful when you need to manage state variables that are incremented or decremented frequently, such as counters, progress bars, or pagination.

Installation

To install use-incremental-state, run the following command:

npm install use-incremental-state

Usage

To use useIncrementalState in your React project, import the useIncrementalState hook from the package:

import { useIncrementalState } from 'use-incremental-state';
Then, use the useIncrementalState hook in your component to manage the incremental state variable:
function MyComponent() {
const [count, incrementCount, decrementCount] = useIncrementalState(0);

return (

const [state, increment, decrement] = useIncrementalState(initialValue, step = 1);

• state: the current value of the incremental state variable. (default is 0)
• increment: a function that increments the state variable by the specified step (default is 1).
• decrement: a function that decrements the state variable by the specified step (default is 1).

Example

Here's an example of using Use-Incremental-State to manage a progress bar:

import { useIncrementalState } from 'use-incremental-state';

function ProgressBar() {
  const [progress, incrementProgress] = useIncrementalState(0, 10);

  function handleClick() {
    incrementProgress();
  }

  return (
    <div>
      <div style={{ width: `${progress}%`, height: '20px', backgroundColor: 'green' }}></div>
      <button onClick={handleClick}>Next Step</button>
    </div>
  );
}

In the example above, the useIncrementalState hook is used to manage the progress state variable, which is initialized to 0 and incremented by 10 on each click of the "Next Step" button. The progress variable is used to set the width of a green div, which represents the progress bar.