Heading-alternative.js

import React from 'react';
import styled, { css } from 'styled-components';

export const getFontSize = ({ level }) => `${0.5 + (1 / level)}rem`;

const styles = css`
  font-family: ${(props) => props.theme.fonts.primary};
  font-weight: 500;
  font-size: ${getFontSize};
`;

const Heading = styled(
  ({ level, children, ...props }) =>
    React.createElement(`h${level}`, props, children)
)`${styles}`;

Heading.defaultProps = {
  level: 1
};

export default Heading;