Updated docs

demo/src/App.scss

@@ -1,4 +1,4 @@
-body {
+body, li, p, table, pre {
 	font-size: 18px;
 }
 
@@ -55,6 +55,45 @@ pre {
 	}
 }
 
+.docs-main-container {
+	h3 {
+		font-weight: 400;
+		font-size: 20px;
+		color: #193549;
+		margin-top: 20px;
+		margin-bottom: 20px;
+	}
+
+	table {
+		width: 100%;
+		margin-bottom: 20px;
+
+		tr {
+			td, th {
+				border-bottom: 1px solid #eee;
+				padding: 5px 10px
+			}
+
+			th {
+				strong {
+					font-weight: 400;
+				}
+			}
+
+			th:first-child, td:first-child {
+				width: 25%;
+			}
+		}
+
+		tbody {
+			strong {
+				font-weight: 500;
+				color: maroon;
+			}
+		}
+	}
+}
+
 .mobileDesc, .mobile {
 	display: none;
 }

demo/src/docs/Docs.tsx

@@ -13,6 +13,7 @@ import { SizingInfo } from './SizingInfo';
 import { VersionHistory } from './VersionHistory';
 import { Intro } from './Intro';
 import { Try } from './Try';
+import { KnownIssues } from './KnownIssues';
 
 export const Docs = () => {
 	return (
@@ -35,6 +36,7 @@ export const Docs = () => {
               <Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
               <Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
               <Menu.Item><a href="#try">Try</a></Menu.Item>
+              <Menu.Item><a href="#issues">Known issues</a></Menu.Item>
               <Menu.Item><a href="#changes">Version history</a></Menu.Item>
             </Menu>
 
@@ -62,6 +64,7 @@ export const Docs = () => {
             <Stacked />
             <SizingInfo />
             <Try />
+            <KnownIssues />
             <VersionHistory />
 
           </Space.Fill>

demo/src/docs/Intro.tsx

@@ -31,7 +31,7 @@ export const Intro = () => {
             </p>
 
             <p>
-              <img src="/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
+              <img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
             </p>
 		</>
 	)

demo/src/docs/KnownIssues.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const KnownIssues = () => {
+	return (
+		<>
+			<h2 id="issues">Known issues / limitations</h2>
+
+			<ul>
+				<li>
+					Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap
+					to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <strong>&lt;Fill /&gt;</strong>
+					spaces to seperate the horizontally and vertically anchored spaces.
+				</li>
+				<li>
+					There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and
+					target them with media queries like you would with any other DOM element.
+				</li>
+			</ul>
+
+		</>
+	)
+}

demo/src/docs/Resizable.tsx

@@ -117,6 +117,40 @@ export const Resizable = () => {
 
 		  </Tabs.TabPane>
 		</Tabs>	
+
+		<h3>Extra properties</h3>
+
+		<table>
+			<thead>
+				<tr>
+					<th>Property</th>
+					<th>Description</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>minimumSize</strong></td>
+					<td>
+			  			Optionally sets the minimum size the space can be resized to in pixels. 
+					</td>
+				</tr>
+				<tr>
+					<td><strong>maximumSize</strong></td>
+					<td>
+			  			Optionally sets the mazimum size the space can be resized to in pixels. 
+					</td>
+				</tr>
+				<tr>
+					<td><strong>overlayHandle</strong></td>
+					<td>
+			  			By default, the resize handle is overlayed on top of the spaces content. This might cause issues if a clickable element
+						sits underneath the resize handle. You can optionally set this to <strong>false</strong> to make the resize handle sit
+						next to the space content.
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
 		</>	
 	)
 }

demo/src/docs/Types.tsx

@@ -65,6 +65,48 @@ export const Types = () => {
 				</ul>
 			</Tabs.TabPane>
 			</Tabs>
+
+		<h3>Properties</h3>
+
+		<table>
+			<thead>
+				<tr>
+					<th>Property</th>
+					<th>Description</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><strong>as</strong></td>
+					<td>
+						By default React Spaces will render a div to the DOM. You can override the element rendered by setting this property
+						with the element name, i.e. <strong>as="article"</strong> or <strong>as="aside"</strong>.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>centerContent</strong></td>
+					<td>
+						Instead of using the <strong>&lt;Centered /&gt;</strong> or <strong>&lt;CenteredVertically /&gt;</strong> components inside space
+						you can specify the centering type here. Possible values are <strong>"Vertical"</strong> or <strong>"HorizontalVertical"</strong>.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>scrollable</strong></td>
+					<td>
+						Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if
+						the content overflows.
+					</td>
+				</tr>
+				<tr>
+					<td><strong>trackSize</strong></td>
+					<td>
+						Tells the space to report it's size when it changes size to the <strong>&lt;Info /&gt;</strong> component. With this turned off
+						the space will only report the initial size.
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
 		</>
 	)
 }

demo/src/docs/VersionHistory.tsx

@@ -5,6 +5,41 @@ export const VersionHistory = () => {
 		<>
 			<h2 id="changes">Version history</h2>
 
+			<div>
+				<h3>0.1.10</h3> 
+				<ul>
+					<li>
+						Added 'as' property to allow rendered DOM element to be specified (thanks to{" "}
+						<a href="https://www.reddit.com/user/MahNonAnon/" target="_blank">u/MahNonAnon</a> and{" "}
+						<a href="https://www.reddit.com/user/trevoreyre/" target="_blank">u/trevoreyre</a> on Reddit
+						for suggestion of this).
+					</li>
+					<li>
+						Added 'centerContent' property as short-hand for centering space content instead of having
+						to introduce the extra &lt;Centered /&gt; or &lt;CenteredVertically /&gt; components.
+					</li>
+					<li>
+						Allow resize handle width to be specified and also it's placement within space controlled
+						with the 'overlayHandle' property.
+					</li>
+					<li>
+						Fixed issue with dynamically added/removed anchored spaces where an anchored space would
+						see itself as a space taking space.
+					</li>
+				</ul>
+			</div>
+			<div>
+				<h3>0.1.9</h3> 
+				<ul>
+					<li>Added repository field to package.json</li>
+				</ul>
+			</div>
+			<div>
+				<h3>0.1.8</h3> 
+				<ul>
+					<li>Removed clear fix from space</li>
+				</ul>
+			</div>
 			<div>
 				<h3>0.1.7</h3> 
 				<ul>

react-spaces/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-spaces",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "main": "dist/index.js",
   "repository": "github:aeagle/react-spaces",
   "author": {