Use forwardRef instead

statisticsnorway · Aug 30, 2024 · 8f37c44 · 8f37c44
1 parent cb9a08d
commit 8f37c44
Showing 1 changed file with 40 additions and 37 deletions.
diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
@@ -1,42 +1,46 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-const Link = ({
-  ariaLabel,
-  children,
-  className,
-  href,
-  icon,
-  isExternal = false,
-  linkType,
-  negative = false,
-  tabIndex,
-  title,
-  onClick = () => {},
-  standAlone,
-  ref,
-}) => {
-  const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
-		${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
+const Link = forwardRef(
+  (
+    {
+      ariaLabel,
+      children,
+      className,
+      href,
+      icon,
+      isExternal = false,
+      linkType,
+      negative = false,
+      tabIndex,
+      title,
+      onClick = () => {},
+      standAlone,
+    },
+    ref
+  ) => {
+    const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
+    ${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
 
-  return (
-    // eslint-disable-next-line react/jsx-no-target-blank
-    <a
-      className={classNames.replace(/\s\s+/g, ' ').trim()}
-      href={href}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-      tabIndex={tabIndex}
-      aria-label={ariaLabel}
-      title={title}
-      onClick={onClick}
-      ref={ref}
-    >
-      {icon && <div className='icon-wrapper'>{icon}</div>}
-      {children && <span className='link-text'>{children}</span>}
-    </a>
-  )
-}
+    return (
+      // eslint-disable-next-line react/jsx-no-target-blank
+      <a
+        className={classNames.replace(/\s\s+/g, ' ').trim()}
+        href={href}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+        tabIndex={tabIndex}
+        aria-label={ariaLabel}
+        title={title}
+        onClick={onClick}
+        ref={ref}
+      >
+        {icon && <div className='icon-wrapper'>{icon}</div>}
+        {children && <span className='link-text'>{children}</span>}
+      </a>
+    )
+  }
+)
 
 Link.propTypes = {
   ariaLabel: PropTypes.string,
@@ -51,7 +55,6 @@ Link.propTypes = {
   title: PropTypes.string,
   onClick: PropTypes.func,
   standAlone: PropTypes.bool,
-  ref: PropTypes.object,
 }
 
 export default Link