search

TylerBarnes / gatsby-plugin-transition-link

A link component for page transitions in gatsby
537 stars 70 forks source link

Trigger transition programatically #193

Closed mmellado closed 4 years ago

mmellado commented 4 years ago

Hi,

This library is working great for our project, but I just started facing an issue that I can't find any documentation on how to address. So far all links on our site are TransitionLinks. However, we stumbled into a use case where we need to enable click on interaction points within a canvas element. This means we need to be able to trigger an animated page transition programatically.

Digging into the code I found the utils function triggerTransition which seems to be the heart the triggers the actual transition in TransitionLink. At first I was struggling because this function expoects a react SyntheticEvent. Was able to get around it by passing an object with noop functions passed into persists and preventDefault. While hacky, this allowed me to make further attempts, only to run into the need of updateContext which I can't seem to find exposed anywhere.

Now, I know I'm going rouge on attempting to use this util function, so I figured I'd ask what the recommended way to do a programatic page change with a transition would be. (using navigate from gatsby does the page change without transition). I also noticed that there is a useTriggerTransition hook which seems undocumented and to do absolutely nothing :(

mmellado commented 4 years ago

Well, just realised that #157 is currently opened. Is there an ETA on when this would be merged?

TylerBarnes commented 4 years ago

Just replied to the PR. Should be merged soon!

TylerBarnes commented 4 years ago

This is available now in gatsby-plugin-transition-link@1.17.8. It is undocumented for now (I'll be migrating the docs from WordPress to MDX soon). But you can see how to use it in the PR linked above