From 9f48704b5eeb9f34571fe8d667e1468e2ac1be8b Mon Sep 17 00:00:00 2001
From: Luis Fernando Rocha <luisfrocha@users.noreply.github.com>
Date: Fri, 2 Oct 2020 15:20:30 -0500
Subject: [PATCH 1/2] Added prop preserveAspectRatio

---
 src/HexGrid.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/HexGrid.js b/src/HexGrid.js
index 42d0c4a..cf3d1e6 100644
--- a/src/HexGrid.js
+++ b/src/HexGrid.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 class HexGrid extends Component {
   static propTypes = {
+    preserveAspectRatio: PropTyes.string,
     width: PropTypes.oneOfType([
       PropTypes.string.isRequired,
       PropTypes.number.isRequired,
@@ -24,7 +25,15 @@ class HexGrid extends Component {
   render() {
     const { width, height, viewBox } = this.props
     return (
-      <svg className="grid" width={width} height={height} viewBox={viewBox} version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        className="grid"
+        preserveAspectRatio={preserveAspectRatio}
+        width={width}
+        height={height}
+        viewBox={viewBox}
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         {this.props.children}
       </svg>
     );

From 8b7136824bb8f3e7796ae0046e7ddfa1c3fd3718 Mon Sep 17 00:00:00 2001
From: Luis F Rocha <luisfrocha@icloud.com>
Date: Tue, 10 Nov 2020 06:58:50 -0600
Subject: [PATCH 2/2] - Added prop for preserveAspectRatio for HexGrid - Added
 prop for patternUnits for Pattern

---
 src/HexGrid.js | 11 ++++++-----
 src/Pattern.js | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/HexGrid.js b/src/HexGrid.js
index cf3d1e6..63431dc 100644
--- a/src/HexGrid.js
+++ b/src/HexGrid.js
@@ -3,14 +3,14 @@ import PropTypes from 'prop-types';
 
 class HexGrid extends Component {
   static propTypes = {
-    preserveAspectRatio: PropTyes.string,
+    preserveAspectRatio: PropTypes.string,
     width: PropTypes.oneOfType([
       PropTypes.string.isRequired,
-      PropTypes.number.isRequired,
+      PropTypes.number.isRequired
     ]),
     height: PropTypes.oneOfType([
       PropTypes.string.isRequired,
-      PropTypes.number.isRequired,
+      PropTypes.number.isRequired
     ]),
     viewBox: PropTypes.string,
     children: PropTypes.node.isRequired
@@ -19,11 +19,12 @@ class HexGrid extends Component {
   static defaultProps = {
     width: 800,
     height: 600,
-    viewBox: "-50 -50 100 100"
+    viewBox: "-50 -50 100 100",
+    preserveAspectRatio: "xMidYMid meet"
   }
 
   render() {
-    const { width, height, viewBox } = this.props
+    const { width, height, viewBox, preserveAspectRatio } = this.props
     return (
       <svg
         className="grid"
diff --git a/src/Pattern.js b/src/Pattern.js
index 6c39d0a..eec3935 100644
--- a/src/Pattern.js
+++ b/src/Pattern.js
@@ -1,24 +1,25 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import HexUtils from './HexUtils';
 import Point from './models/Point';
 
 class Pattern extends Component {
   static propTypes = {
     id: PropTypes.string.isRequired,
     link: PropTypes.string.isRequired,
-    size: PropTypes.object
+    size: PropTypes.object,
+    patternUnits: PropTypes.string
   };
   static defaultProps = {
-    size: new Point(10, 10)
+    size: new Point(10, 10),
+    patternUnits: 'objectBoundingBox'
   };
 
   render() {
-    const { id, link, size } = this.props;
+    const { id, link, size, patternUnits } = this.props;
 
     return (
       <defs>
-        <pattern id={id} patternUnits="objectBoundingBox" x={0} y={0} width={size.x} height={size.y}>
+        <pattern id={id} patternUnits={patternUnits} x={0} y={0} width={size.x} height={size.y}>
           <image xlinkHref={link} x={0} y={0} width={size.x*2} height={size.y*2} />
         </pattern>
       </defs>