ソースを参照

Add props to Link component similar to ReachRouter Link component.

Pedro Semeano 4 年 前
コミット
48ff7f64ad

+ 26 - 3
packages/components/src/components/Link/Link.tsx

@@ -6,6 +6,12 @@ type CustomLinkProps = {
   children: ReactChild
   to: string
   disabled?: boolean
+  className?: string
+  replace?: boolean
+  ref?: React.Ref<HTMLAnchorElement>
+  innerRef?: React.Ref<HTMLAnchorElement>
+  getProps?: any
+  state?: any
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
 } & CustomLinkStyleProps
 
@@ -13,12 +19,29 @@ export default function CustomLink({
   children,
   to = "",
   disabled = false,
+  className = "",
+  replace = false,
+  ref = () => {},
+  innerRef = () => {},
+  getProps = () => {},
+  state = null,
   onClick,
-  ...styleProps
+  ...props
 }: CustomLinkProps) {
 
-  let styles = makeStyles(styleProps)
+  let styles = makeStyles(props)
 
   if (disabled) return <label css={styles.disabled}>{children}</label>
-  return <Link to={to} css={styles.regular}>{children}</Link>
+  return <Link
+    to={to}
+    css={styles.regular}
+    className={className}
+    replace={replace}
+    ref={ref}
+    innerRef={innerRef}
+    getProps={getProps}
+    state={state}
+  >
+    {children}
+  </Link>
 }

+ 1 - 1
packages/components/stories/12-Link.stories.tsx

@@ -8,7 +8,7 @@ export default {
 
 export const Default = () =>
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
-    <Link to="www.google.com">Go to Google</Link>
+    <Link to="path">Go to path</Link>
   </div>
 
 export const Disabled = () =>