Simpler hook-only API without rendering a component?

Issue: 🚀 Feature Proposal

Thank you for this amazing animation library!

I’ve been wondering if there’s any way for the animated component to be avoided at all by passing the ref directly to useSpring(s). As far as I understand, the animated component is used only so that there is access to the ref (to directly set styles) and otherwise props are just passed down, but maybe I’m missing something here.

Motivation

We’d like to create a hook that would contain useSpring that has access to the ref.

Example

What I’m proposing would be this:

const ref = useRef();
useSpring( { opacity: ..., target: ref } );

return <div ref={ ref } { ...otherProps } />;

[aleclarson]

FWIW, you can do something similar already (with v9):

import { Globals } from 'react-spring'

const { applyAnimatedValues } = Globals

const ref = useRef()
useSpring({
  opacity: visible ? 1 : 0,
  onChange(values) {
    applyAnimatedValues(ref.current, values)
  }
})

return <div ref={ref} />

You could make a custom hook to avoid duplication:

function useAnimatedRef(props) {
  const ref = useRef()
  useSpring({ 
    ...props, 
    onChange(values) {
      applyAnimatedValues(ref.current, values)
      if (props.onChange) props.onChange(values)
    }
  })
  return ref
}

const ref = useAnimatedRef({ opacity: visible ? 1 : 0 })
return <div ref={ref} />

edit: Oh wait, I forgot that applyAnimatedValues is not in Globals anymore. 😅 We should probably export it for each platform.

[joshuaellis]

closing due to inactivity. please use discussions or discord if you want more help or please consider creating a PR if you want to add a feature 😄