Custom hook implementing useSpring with ref together

[olivertylsar]

I have a component with a few elements appearing in sequence. I use useSpring and useTransition hooks for the animations themselves and useChain for chaining them together. Since I'm chaining them I need to create refs for all of them and then pass them into those spring hooks. The thing is that I have like 6 of these elements (headline, paragraph, icons bar, image, etc.) and I didn't want to have 6 useRef calls and 6 useSpring/useTransition calls inside the component. So I created a simple custom hook which wraps the useRef hook and useSpring/useTransition hook together and returns an array with the returned values from the hooks ([ref, props]), which I can then use in the component for chaining and animation.

import { useRef } from "react";
import { useSpring, UseSpringProps } from "react-spring";

const useSpringWithRef = (values: UseSpringProps<any>) => {
  const ref = useRef(null);
  const props = useSpring({ ref, ...values });

  return [ref, props] as const;
};

export default useSpringWithRef;

const [headlineRef, headlineProps] = useSpringWithRef({ config: config.gentle })

What bothers me is that I don't get recommendations of what I can pass to the useSpring values object when calling this custom hook (CSS Properties and other spring related options), because I can't figure out what type variable I should pass to the UseSpringProps. Any idea how to solve this?

Thanks.

[tomdohnal]

What version of react-spring are you using?

[olivertylsar]

Latest stable release.
"react-spring": "^8.0.27"