react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

[bug]: Typescript error with `position: "absolute"`

Open LoyalPotato opened this issue 2 years ago • 5 comments

Which react-spring target are you using?

  • [X] @react-spring/web
  • [ ] @react-spring/three
  • [ ] @react-spring/native
  • [ ] @react-spring/konva
  • [ ] @react-spring/zdog

What version of react-spring are you using?

9.5.5

What's Wrong?

Setting position: "absolute" in the from property of the useTransition hook shows a typescript error when setting style on the animated div.

To Reproduce

Set position: "absolute" in the from property of the useTransition hook.

Expected Behaviour

No errors

Link to repo

https://codesandbox.io/s/youthful-gianmarco-y5q1v2?file=/src/App.tsx

LoyalPotato avatar Oct 28 '22 10:10 LoyalPotato

@joshuaellis Is there any way that I can help? I'm not sure where to look to fix this :)

LoyalPotato avatar Oct 31 '22 09:10 LoyalPotato

I haven't looked too much into it at this point, but I imagine for some reason the DOM Position type which is a union of strings is not being correctly understood by the animated types of the web target – https://github.com/pmndrs/react-spring/blob/master/targets/web/src/animated.ts so somewhere in this file will probably need tweaking, I think...

joshuaellis avatar Oct 31 '22 10:10 joshuaellis

Try using, from:{ position: 'absolute' as const } codesandboxy5q1v2

gauravmnjwr avatar Dec 28 '22 06:12 gauravmnjwr

Can we do something about this ? Why do we need to const it ?

sshmaxime avatar May 17 '23 15:05 sshmaxime

Can we do something about this ? Why do we need to const it ?

You probably need to submit a PR to avoid using const.

joshuaellis avatar May 17 '23 15:05 joshuaellis