ref Type incorrect

[lachieh]

Currently the type of the ref prop on the Player component is inherited from the HTMLDivElement, but in the source the Lottie instance is passed to the forwarded ref.

Type inheriting here:

react-lottie-player/src/index.d.ts

Lines 10 to 26 in 66e98a1

	export type LottieProps = React.DetailedHTMLProps<
	React.HTMLAttributes<HTMLDivElement>,
	HTMLDivElement
	> &
	Partial<Pick<AnimationConfig<RendererType>, 'loop' | 'renderer' | 'rendererSettings' | 'audioFactory'>> & {
	play?: boolean
	goTo?: number
	speed?: number
	direction?: AnimationDirection
	segments?: AnimationSegment | AnimationSegment[]
	useSubframes?: boolean
	onComplete?: AnimationEventCallback
	onLoopComplete?: AnimationEventCallback
	onEnterFrame?: AnimationEventCallback
	onSegmentStart?: AnimationEventCallback
	} & ({ path?: string } | { animationData?: object })

Lottie ref assigned here:

react-lottie-player/src/makeLottiePlayer.js

Lines 66 to 70 in 66e98a1

	const setLottieRefs = useCallback((newRef) => {
	animRef.current = newRef;
	// eslint-disable-next-line no-param-reassign
	if (forwardedRef) forwardedRef.current = newRef;
	}, []); // eslint-disable-line react-hooks/exhaustive-deps

I am happy to assist with correcting this by exposing the animElementRef prop and correcting the types for both if a PR would be accepted.

[mifi]

pr is welcome!

[mifi]

although im not sure why nobody has hit this issue before

[lachieh]

Thanks, I'll get to that over the next couple of days.

although im not sure why nobody has hit this issue before

My guess is that you've covered the 80% use case by accepting various props, and I'm operating in the 20% use case because I need control over the Lottie instance. Multiply that with typescript usage and it's likely a pretty small number of people who have hit this.