39 lines
1.1 KiB
JavaScript
39 lines
1.1 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) => {
|
|
if (instance) {
|
|
visualState.onMount && visualState.onMount(instance);
|
|
}
|
|
if (visualElement) {
|
|
if (instance) {
|
|
visualElement.mount(instance);
|
|
}
|
|
else {
|
|
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 };
|