34 lines
1.0 KiB
JavaScript
34 lines
1.0 KiB
JavaScript
|
import { useCallback } from 'react';
|
||
|
|
import { isRefObject } from '../../utils/is-ref-object.mjs';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates a ref function that, when called, hydrates the provided
|
||
|
|
* external ref and VisualElement.
|
||
|
|
*/
|
||
|
|
function useMotionRef(visualState, visualElement, externalRef) {
|
||
|
|
return useCallback((instance) => {
|
||
|
|
instance && visualState.mount && visualState.mount(instance);
|
||
|
|
if (visualElement) {
|
||
|
|
instance
|
||
|
|
? visualElement.mount(instance)
|
||
|
|
: visualElement.unmount();
|
||
|
|
}
|
||
|
|
if (externalRef) {
|
||
|
|
if (typeof externalRef === "function") {
|
||
|
|
externalRef(instance);
|
||
|
|
}
|
||
|
|
else if (isRefObject(externalRef)) {
|
||
|
|
externalRef.current = instance;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* Only pass a new ref callback to React if we've received a visual element
|
||
|
|
* factory. Otherwise we'll be mounting/remounting every time externalRef
|
||
|
|
* or other dependencies change.
|
||
|
|
*/
|
||
|
|
[visualElement]);
|
||
|
|
}
|
||
|
|
|
||
|
|
export { useMotionRef };
|