usage in terminal with ink

[mdugue]

Hi,

was anybody successfull running react-spring as part of ink?

I was able to import react-spring into an app bootstrapped via create ink app, which looks basically like this:

"use strict"
const React = require("react")
const { Text, Box } = require("ink")
const { animated, useSpring } = require("react-spring/universal.cjs")

const App = () => {
  // const props = useSpring({ number: 1, from: { number: 0 } })
  const AnimatedText = animated(Text)
  return (
    <Box>
      <Text>works as aspected</Text>
      <AnimatedText>renders just fine</AnimatedText>
      {/*<AnimatedText>{props.number}</AnimatedText>*/}
    </Box>
  )
}

module.exports = App

and it works just fine. When the useSpring logic is commented in, it crashes unfortunately because window.requestAnimationFrame is not a function.

Does somebody manage to get it working?

[mdugue]

damned. Rereading my comment I found the answer: a requestAnimationFrame Polyfill is needed. 🙈🤦‍♂️
It works! 🎉
I'll leave the comment here for any further people stumbling upon it.

[mdugue]

in case anybody is curious, here is the working example: https://github.com/mdugue/npx-mdugue/blob/main/ui.js