Merge pull request #48 from unix/link

feat(link): forward ref for next/link compatibility

components/link/link.tsx

@@ -24,16 +24,16 @@ const defaultProps = {
 type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>
 export type LinkProps = Props & typeof defaultProps & NativeAttrs
 
-const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
+const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(React.forwardRef(({
   href, color, underline, pure, children, className, block, ...props
-}) => {
+}, ref: React.Ref<HTMLAnchorElement>) => {
   const theme = useTheme()
   const linkColor = color || block ? theme.palette.success : 'inherit'
   const padding = block ? theme.layout.gapQuarter : '0'
   const decoration = underline ? 'underline' : 'none'
   
   return (
-    <a className={`link ${className}`} href={href} {...props}>
+    <a className={`link ${className}`} href={href} {...props} ref={ref}>
       {children}
       {!pure && <LinkIcon color={linkColor}/>}
       <style jsx>{`
@@ -58,6 +58,6 @@ const Link: React.FC<React.PropsWithChildren<LinkProps>> = React.memo(({
       `}</style>
     </a>
   )
-})
+}))
 
 export default withDefaults(Link, defaultProps)

pages/docs/components/link.mdx

@@ -1,5 +1,6 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Link, Text } from 'components'
+import { Link, Text, Code } from 'components'
+import NextLink from 'next/link'
 
 export const meta = {
   title: 'link',
@@ -46,6 +47,16 @@ Hyperlinks between pages.
 <Link href="#" pure block>The Evil Rabbit Jumped over the Fence.</Link>
 `} />
 
+<Playground
+  title={<>With <Code>next/link</Code></>}
+  desc="Use `Link` with NextJS without any configuration."
+  scope={{ Link, NextLink }}
+  code={`
+<NextLink href="/docs/components/button">
+  <Link pure block>Docs of Button</Link>
+</NextLink>
+`} />
+
 <Attributes edit="/pages/docs/components/link.mdx">
 <Attributes.Title>Link.Props</Attributes.Title>