fix(gatsby-plugin-google-gtag): OutboundLink Forward Ref (#22705)

* gatsby-plugin-google-gtag OutboundLink Forward Ref update gatsby-plugin-google-gtag OutboundLink component to forward ref onto DOM element. * fix typo * linting fix * remove semi clons
gatsbyjs · Apr 1, 2020 · 7a4db4b · 7a4db4b
1 parent d5894c1
commit 7a4db4b
Showing 1 changed file with 43 additions and 42 deletions.
diff --git a/packages/gatsby-plugin-google-gtag/src/index.js b/packages/gatsby-plugin-google-gtag/src/index.js
@@ -1,50 +1,51 @@
 import React from "react"
 import PropTypes from "prop-types"
 
-function OutboundLink(props) {
- return (
- <a
- {...props}
- onClick={e => {
- if (typeof props.onClick === `function`) {
- props.onClick(e)
- }
- let redirect = true
- if (
- e.button !== 0 ||
- e.altKey ||
- e.ctrlKey ||
- e.metaKey ||
- e.shiftKey ||
- e.defaultPrevented
- ) {
- redirect = false
- }
- if (props.target && props.target.toLowerCase() !== `_self`) {
- redirect = false
- }
- if (window.gtag) {
- window.gtag(`event`, `click`, {
- event_category: `outbound`,
- event_label: props.href,
- transport_type: redirect ? `beacon` : ``,
- event_callback: function() {
- if (redirect) {
- document.location = props.href
- }
- },
- })
- } else {
- if (redirect) {
- document.location = props.href
- }
+const OutboundLink = React.forwardRef(({ children, ...props }, ref) => (
+ <a
+ ref={ref}
+ {...props}
+ onClick={e => {
+ if (typeof props.onClick === `function`) {
+ props.onClick(e)
+ }
+ let redirect = true
+ if (
+ e.button !== 0 ||
+ e.altKey ||
+ e.ctrlKey ||
+ e.metaKey ||
+ e.shiftKey ||
+ e.defaultPrevented
+ ) {
+ redirect = false
+ }
+ if (props.target && props.target.toLowerCase() !== `_self`) {
+ redirect = false
+ }
+ if (window.gtag) {
+ window.gtag(`event`, `click`, {
+ event_category: `outbound`,
+ event_label: props.href,
+ transport_type: redirect ? `beacon` : ``,
+ event_callback: function() {
+ if (redirect) {
+ document.location = props.href
+ }
+ },
+ })
+ } else {
+ if (redirect) {
+ document.location = props.href
  }
+ }
 
- return false
- }}
- />
- )
-}
+ return false
+ }}
+ >
+ {children}
+ </a>
+))
 
 OutboundLink.propTypes = {
  href: PropTypes.string,