@razorpay/blade
Version:
The Design System that powers Razorpay
35 lines (29 loc) • 1.2 kB
JavaScript
import { useRef, useEffect } from 'react';
import { FluidGradientMount } from './FluidGradientMount.js';
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable consistent-return */
function useFluidGradient(_ref) {
var size = _ref.size,
_ref$origin = _ref.origin,
origin = _ref$origin === void 0 ? [0.5, 0.5] : _ref$origin;
var containerRef = useRef(null);
var mountRef = useRef(null);
// Reactively update origin without re-initialising WebGL
useEffect(function () {
var _mountRef$current;
(_mountRef$current = mountRef.current) === null || _mountRef$current === void 0 || _mountRef$current.setOrigin(origin);
}, [origin[0], origin[1]]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(function () {
var container = containerRef.current;
if (!container) return;
var mount = new FluidGradientMount(container, size, origin);
mountRef.current = mount;
return function () {
mount.dispose();
mountRef.current = null;
};
}, [size]); // eslint-disable-line react-hooks/exhaustive-deps
return containerRef;
}
export { useFluidGradient };
//# sourceMappingURL=useFluidGradient.js.map