ratio-lock
Version:
A TypeScript library for managing n numbers with locked ratios. When the ratio is locked, changing one value automatically adjusts all other values to maintain their proportional relationships.
48 lines • 1.94 kB
JavaScript
import { useState, useCallback, useMemo } from 'react';
import { RatioLock } from '../ratio-lock.js';
/**
* React hook for managing numbers with locked ratios
* @param initialValues - Initial values for the ratio lock
* @param options - Configuration options
* @returns Object with values, lock controls, and update functions
*/
export function useRatioLock(initialValues, options) {
const [ratioLockInstance] = useState(() => new RatioLock(initialValues, options));
const [values, setValuesState] = useState(() => ratioLockInstance.getValues());
const [isLocked, setIsLocked] = useState(() => ratioLockInstance.isLocked());
const [ratios, setRatios] = useState(() => ratioLockInstance.getRatios());
const setValue = useCallback((index, value) => {
ratioLockInstance.setValue(index, value);
setValuesState(ratioLockInstance.getValues());
}, [ratioLockInstance]);
const setValues = useCallback((newValues) => {
ratioLockInstance.setValues(newValues);
setValuesState(ratioLockInstance.getValues());
setRatios(ratioLockInstance.getRatios());
}, [ratioLockInstance]);
const lock = useCallback(() => {
ratioLockInstance.lock();
setIsLocked(true);
setRatios(ratioLockInstance.getRatios());
}, [ratioLockInstance]);
const unlock = useCallback(() => {
ratioLockInstance.unlock();
setIsLocked(false);
}, [ratioLockInstance]);
const toggle = useCallback(() => {
ratioLockInstance.toggle();
setIsLocked(ratioLockInstance.isLocked());
setRatios(ratioLockInstance.getRatios());
}, [ratioLockInstance]);
return useMemo(() => ({
values,
setValue,
setValues,
isLocked,
lock,
unlock,
toggle,
ratios,
}), [values, setValue, setValues, isLocked, lock, unlock, toggle, ratios]);
}
//# sourceMappingURL=use-ratio-lock.js.map