I need to pass the ref of a child component to a parent in javascript

Question

So, I had been working on a site, and I am new to react-spring, so, I had this problem: I have the main App.js component where I assemble all my other components, and I have this other component called CharAnim.jsx under my "src/components" folder.

The charAnim uses an useTrail for a specific animation, which I need to use in my App.js component. I have another spring animation in the App.js component which I want to chain with the animation in the CharAnim component.

For that I need to get the ref var of the animation in the charAnim component. How do I do that? Please help

inside charAnim

const newTrail = useTrail(charArr.length, {
ref:self_animStyle_ref, //I have set this to const self_animStyle_ref = useRef(); which i need to pass to my app.js
to:{transform:`translateX(0px) translateY(0px)`,opacity:1},
from:{transform:`translateX(${xTrans}px) translateY(${yTrans}px)`,opacity:0},
config:config.gentle,  
});

Answer 1

You can create the ref in the parent (App), and pass it to CharAnim component (I've used ref forwarding, but it's not a must), and then you can use useChain() in the parent.

Example (not tested):

const CharAnim = forwardRef((props, ref) => {
  const newTrail = useTrail(charArr.length, {
    ref,
    to: {transform:`translateX(0px) translateY(0px)`,opacity:1},
    from: {transform:`translateX(${xTrans}px) translateY(${yTrans}px)`,opacity:0},
    config: config.gentle,  
  });
  
  return (
    // JSX
  )
});

const App = () => {
  const charAnimRef = useRef();
  const appAnimRef = useRef();
  
  useChain([charAnimRef, appAnimRef])

  return (
    <CharAnim {...otherProps} ref={charAnimRef} />
  );
};