SVG: Responsive viewBox

src/SVG/SVG.tsx

@@ -7,18 +7,49 @@ interface ISVGProps {
   MainContainer: AvailableContainer
 }
 
+interface ISVGState {
+  viewBox: number[]
+}
+
 export class SVG extends React.Component<ISVGProps> {
-  render() {
-    const viewBox: string = [
+  public state: ISVGState;
+
+  constructor(props: ISVGProps) {
+    super(props);
+    this.state = {
+      viewBox: [
         0,
         0,
         window.innerWidth,
         window.innerHeight
-    ].join(' ');
+      ]
+    };
+  }
+
+  updateViewBox() {
+    this.setState({
+      viewBox: [
+        0,
+        0,
+        window.innerWidth,
+        window.innerHeight
+      ]
+    });
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.updateViewBox.bind(this));
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateViewBox.bind(this));
+  }
+
+  render() {
     const xmlns = '<http://www.w3.org/2000/svg>';
 
     const properties = {
-      viewBox,
+      viewBox: this.state.viewBox.join(' '),
       xmlns
     };