Estoy buscando construir un componente de observador de intersección en un proyecto personal de Gatsby. La razón de esto es que la animación y el activador son los mismos en diferentes áreas del sitio. Lo que tengo hasta ahora:

 // Observer.js import React, { useEffect, useRef } from "react"; import { useAnimation } from "framer-motion"; const Observer = ({ children }) => { const controls = useAnimation(); const ref = useRef(); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { controls.start({ opacity: 1, transition: { duration: 0.75, delay: 0.75 }, }); } }, { root: null, rootMargin: "0px", threshold: 0.1, } ); if (ref.current) { observer.observe(ref.current); } }, [ref]); return <div ref={ref}>{children}</div>; }; export default Observer;

Lo que busco hacer es acceder a los controls en los elementos secundarios del componente Observer.js .

 // ChildComponent.js const ChildComponent= (props) => { return ( <Observer> <div> <motion.div initial={{ opacity: 0 }} animate={props.controls} > <h2>This will animate on scroll</h2> </motion.div> </div> </Observer> ); }; export default ChildComponent;

He visto respuestas como -Pasar accesorios del diseño a niños en Gatsby - pero obtengo el error props.children is not a function cuando intento esto.

¿Es posible lo que estoy buscando hacer, o hay una mejor manera de lograrlo?