import{tilt,glare,useResonate,ResonateContainer}from"@resonatejs/react";exportconstCard: React.FC=()=>{consttrackers=useResonate({presets: [glare(),tilt(), ...]// all your presets go here});return(<ResonateContainerclassName="..."trackers={trackers}>
Try it out!
</ResonateContainer>);}
Listeners
import{useResonate,ResonateContainer}from"@resonatejs/react";exportconstCard: React.FC=()=>{consttrackers=useResonate({// access the rich APIlisteners: ({ getCenterPosition })=>{const{ x, y }=getCenterPosition();// return all the event listenersreturn{mousemove({ clientX, clientY }){console.log(clientX-x,clientY-y);},};},});return(<ResonateContainerclassName="h-full w-full py-24 text-zinc-300 ring-2 ring-zinc-600 text-center text-7xl text-wrap rounded-xl font-mono bg-zinc-900"trackers={trackers}>
Try it out!
</ResonateContainer>);};
And each of these preset files have a default function, that handles all the logic for that preset. But these are tightly coupled with the react environment. If we implement these effects in other frameworks then we have to rewrite the implementation code again.
Solution:
Instead what we can do is, move the logic to a separate preset directory packages/react/src/preset >> packages/preset under the packages. And for each framework there will be a dedicated parser, which will take the output generated by the preset file. And do react specific things, like adding refs. Currently the preset file takes the user's configuration and returns a resonate function which handles the implementation, also the ref of the component that it is controlling along with a title, that we pass to the ResonateContainer.
Important points:
You can add the parser here: packages/react/src/core/parser.ts.
The preset folder needs to be shifted directly under the packages/.
Use typescript efficiently. Write readable and reusable types.
Avoid using document.querySelector() or useRef() inside the preset file. Add a method inside the useAPI hook react/src/hooks/api.ts, and use it to access the element in the resonate function.
Using best react practices will be highly appreciated (that includes not using querySelectors, that directly access the DOM elements).
Please add a comment under this issue, if there is anything that you think would be better to add or change. Also I will be more than happy to guide you through the details, but I encourage taking a look at the code first. If there are any doubts not related to this issue you can ask them in the discord channel of JWOC.
That's all for this issue, good luck everyone & Happy Coding! ๐