Premisa

Tengo un componente Fade definido de la siguiente manera:

 const variants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, }; const Fade = ({ visible, ...rest }) => ( <AnimatePresence initial={false} exitBeforeEnter> {visible && ( <motion.div initial="hidden" animate="visible" exit="hidden" {...{ variants, ...rest }} /> )} </AnimatePresence> );

Nota: he eliminado algunas de las definiciones de tipo.

Este componente se puede usar como cualquier otro componente en React (p. ej.: <Fade /> ).

Meta

Mi objetivo es crear una utilidad que se pueda usar así:

 const myFadingDiv = <fade.div />;

o

 const myFadingSection = <fade.section />

Idealmente, me gustaría algo similar a motion , que pueda envolver componentes existentes como este:

 const FadingCustom = fade(CustomComponent);

Solución alterna

He intentado esto:

 const fade = { div: ({ visible, ...rest }) => ( <AnimatePresence initial={false} exitBeforeEnter> {visible && ( <motion.div initial="hidden" animate="visible" exit="hidden" {...{ variants, ...rest }} /> )} </AnimatePresence> ), };

Editar

Aquí hay una actualización rápida de lo que he intentado:

 const fade = new Proxy(motion, { get: (target, tag) => { const Component = target[tag]; return ({ visible, ...rest }: { visible: boolean }) => ( <AnimatePresence initial={false} exitBeforeEnter> {visible && ( <Component initial="hidden" animate="visible" exit="hidden" {...{ variants, ...rest }} /> )} </AnimatePresence> ); }, });

Esto funciona bien, pero no tengo IntelliSense para el accesorio visible .

Conclusión

¿Cómo puedo crear una utilidad como motion que pueda extender la función anterior para cualquier etiqueta?

Preferiría evitar el accesorio as , ya que me gustaría que IntelliSense sugiera los accesorios que el componente puede tomar en función de su etiqueta. También me gustaría establecer definiciones de tipo apropiadas en TypeScript, para dirigir IntelliSense.

¡Cualquier ayuda es muy apreciada! ¡Gracias por tu tiempo!