TimTh Posted January 1 Share Posted January 1 I am stumped trying to correctly type my animation functions when wrapped in contextSafe. You can see an example of my problem here on StackBlitz. In it I’m trying to reproduce a simple version of Animating on interactions with callbacks as shown in the first method of using contextSafe in the Animating on interaction section of the Using GSAP with React page in the docs. I’ve got two simple rotation animations, a square and a circle. The circle is wrapped in contextSafe and the square is not. Both animations work correctly, but the circle throws the TS error “Type 'Function' is not assignable to type 'MouseEventHandler<HTMLDivElement>'.” on the onClick of the circle div. I’ve tried a bunch of different ways of typing the contextSafe function but none seem to work. Does anyone have any insights into what I’m missing, or any examples of TypeScript implementations of contextSafe and useGSAP? Thanks for any help! See the Pen ZEKJPLa by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 2 Solution Share Posted January 2 That looks like just a TypeScript thing. You've gotta cast your function to be what React expects: const onEnterSafe = contextSafe(() => { ... }) as React.MouseEventHandler; // <-- this is the key https://stackblitz.com/edit/gsap-interaction-ibz4fr?file=app%2Fpage.tsx,node_modules%2F%40types%2Freact%2Fts5.0%2Findex.d.ts Better? Link to comment Share on other sites More sharing options...
TimTh Posted January 2 Author Share Posted January 2 Thanks Jack, that was super helpful. I had tried typing it as a MouseEventHandler in a different way and it didn't work, but the syntax you provided did. Really appreciate it! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now