Merge pull request #51 from lsirivong/fix/onClick-handlers

Handle onClick prop explicitly
TylerBarnes · Mar 14, 2019 · efb4e70 · efb4e70
2 parents 64e65a4 + 4fa8251
commit efb4e70
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/example/src/pages/index.js b/example/src/pages/index.js
@@ -120,6 +120,13 @@ class Index extends Component {
             and give us a dark theme when we get there.
           </TransitionLink>
           <br />
+          <AniLink
+            to="/page-2"
+            onClick={() => console.log('Link clicked')}
+          >
+            Go to page 2 normally (with an `onClick`)
+          </AniLink>
+          <br />
           <DisplayState />
         </section>
         <TransitionPortal>

diff --git a/example/src/pages/page-2.js b/example/src/pages/page-2.js
@@ -137,6 +137,13 @@ export default class SecondPage extends Component {
                   👉
                 </span>
               </TransitionLink>
+              <br />
+              <TransitionLink
+                to="/"
+                onClick={() => console.log('Link clicked')}
+              >
+                Go home normally (with an `onClick`)
+              </TransitionLink>
               <DisplayState />
               <section
                 style={{

diff --git a/src/components/TransitionLink.js b/src/components/TransitionLink.js
@@ -13,6 +13,7 @@ const TransitionLink = ({
   activeStyle,
   style,
   className,
+  onClick,
   ...rest
 }) => {
   return (
@@ -22,15 +23,19 @@ const TransitionLink = ({
           activeStyle={activeStyle}
           style={style}
           className={className}
-          onClick={event =>
+          onClick={event => {
             triggerTransition({
               event,
               to,
               exit,
               entry,
               ...context
             })
-          }
+
+            if (typeof onClick === 'function') {
+              onClick(event)
+            }
+          }}
           to={to} // use gatsby link so prefetching still happens. this is prevent defaulted in triggertransition
           {...rest}
         >