react-use-scale

A React hook for proportionally scaling a group of numeric values based on changes to one of them. Ideal for adjusting recipes or ratios.

📦 Installation

pnpm add react-use-scale

🔧 Usage

import useScale from 'react-use-scale';

const initialValues = { flour: 200, sugar: 100, eggs: 2 };

function RecipeForm() {
  const [values, setValue] = useScale(initialValues);

  return (
    <div>
      {Object.entries(values).map(([key, value]) => (
        <div key={key}>
          <label>{key}</label>
          <input
            type="number"
            value={value}
            onChange={(e) =>
              setValue(key as keyof typeof values, Number(e.target.value))
            }
          />
        </div>
      ))}
    </div>
  );
}

‼️ Constraints

All values must be positive numbers.

📄 License

MIT