ReactModernGuage

ReactModernGuage is a React component that displays a set of animated sliders based on a given value. The component utilizes Material-UI (MUI) for styling and rendering the sliders.

Installation

To use the ReactModernGuage component in your project, you need to install it from npm:

npm install react-modern-guage

or

yarn add react-modern-guage

Usage

Here is an example of how to use the ReactModernGuage component:

import React, { useState } from "react";
import ReactModernGuage from "react-modern-guage";

const App = () => {
  const [value, setValue] = useState(50);

  return (
    <div>
      <ReactModernGuage
        value={value}
        dangerValue={[0, 35]}
        warningValue={[36, 75]}
      />
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        min={0}
        max={100}
      />
    </div>
  );
};

export default App;

Props

value (number, required)

The value that determines the current state of the sliders. It should be a number between 0 and 100.

dangerValue (optional, array of 2 numbers)

An optional array that defines the range for the danger slider. The default value is [0, 35]. The array should contain two numbers:

• The first number is the minimum value of the danger range (inclusive).
• The second number is the maximum value of the danger range (inclusive).

warningValue (optional, array of 2 numbers)

An optional array that defines the range for the warning slider. The default value is [36, 75]. The array should contain two numbers:

• The first number is the minimum value of the warning range (inclusive).
• The second number is the maximum value of the warning range (inclusive).

Max Values Constraints

• Danger Slider Max Value: The maximum value for the danger slider is determined by the dangerValue array. By default, it is set to 35.
• Warning Slider Max Value: The maximum value for the warning slider is calculated as warningValue[1] - dangerValue[1]. By default, it is 40.
• Slider 3 Max Value: The maximum value for the third slider is 100 - warningValue[1]. By default, it is 25.

Example

Here’s a simple example that demonstrates the use of the ReactModernGuage component:

import React, { useState } from "react";
import ReactModernGuage from "react-modern-guage";

const Example = () => {
  const [value, setValue] = useState(50);

  return (
    <div>
      <ReactModernGuage
        value={value}
        dangerValue={[0, 30]} // Custom danger range
        warningValue={[31, 70]} // Custom warning range
      />
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        min={0}
        max={100}
      />
    </div>
  );
};

export default Example;

Notes

• Make sure the value prop is always within the range of 0 to 100.
• The dangerValue and warningValue arrays should be provided in ascending order.