27 lines
1.1 KiB
JavaScript
27 lines
1.1 KiB
JavaScript
import { useRef } from 'react';
|
|
import { uniqueId } from './DataUtils';
|
|
|
|
/**
|
|
* This hook returns a unique animation id for the object input.
|
|
* If input changes (as in, reference equality is different), the animation id will change.
|
|
* If input does not change, the animation id will not change.
|
|
*
|
|
* This is useful for animations. The Animate component
|
|
* does have a `shouldReAnimate` prop but that doesn't seem to be doing what the name implies.
|
|
* Also, we don't always want to re-animate on every render;
|
|
* we only want to re-animate when the input changes. Not the internal state (e.g. `isAnimating`).
|
|
*
|
|
* @param input The object to check for changes. Uses reference equality (=== operator)
|
|
* @param prefix Optional prefix to use for the animation id
|
|
* @returns A unique animation id
|
|
*/
|
|
export function useAnimationId(input) {
|
|
var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'animation-';
|
|
var animationId = useRef(uniqueId(prefix));
|
|
var prevProps = useRef(input);
|
|
if (prevProps.current !== input) {
|
|
animationId.current = uniqueId(prefix);
|
|
prevProps.current = input;
|
|
}
|
|
return animationId.current;
|
|
} |