Simpler hook-only API without rendering a component?

[ellatrix]

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.

[ellatrix]

Omg! That would be amazing! I'm guessing you meant onFrame? I see applyAnimatedValues in Globals, but it's an object with the properties fn and transform. I tried both, but it doesn't seem to work. Should I be using something different?

[ellatrix]

I got it to work without applyAnimatedValues by setting the styles manually. Thanks for the tip about onFrame! You made my day. 😊

[aleclarson]

My comment is only relevant to v9. For v8, everything is as you describe. 👍

I see applyAnimatedValues in Globals, but it's an object with the properties fn and transform. I tried both, but it doesn't seem to work. Should I be using something different?

Not sure. I'm not using v8 anymore.

[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 😄