pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
27.98k stars 1.19k forks source link

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

Open LoyalPotato opened 1 year ago

LoyalPotato commented 1 year ago

Which react-spring target are you using?

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 commented 1 year ago

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

joshuaellis commented 1 year ago

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...

gauravmnjwr commented 1 year ago

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

sshmaxime commented 1 year ago

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

joshuaellis commented 1 year ago

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

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