React-Router Link that handles falsy 'to' props and mailto links

Link.js

// @flow
// Handles empty links with proper defaults and allows mailto links
import React, { type Node } from 'react';
import styled from 'styled-components';
import { Link as RouterLink } from 'react-router-dom';

type Props = {
  link: ?string,
  children: Node,
  className?: Object, // gotta pass className to allow styling overrides
};

export const isMailto = (link: ?string) => link && link.startsWith('mailto:');

export const Link = styled(RouterLink).attrs({
  to: (props) => props.link || '#',
  target: (props) => isMailto(props.link) ? '_blank' : '_self',
})`
  &:hover,
  &:focus {
    color: ${(props) => props.link ? 'var(--accent)' : 'inherit'};
  }
  cursor: ${(props) => props.link ? 'pointer' : 'auto'};
`;

export default ({
  link,
  children,
  className,
}: Props) => (
  <Link
    link={link}
    className={className}
  >
    {children}
  </Link>
);