- React Spaces allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces.
-
-
-
-
Features
-
-
-
- No styling to achieve simple or complex layouts.
-
-
- Spaces know how to behave in relation to each other and resize accordingly.
-
-
- Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
-
-
-
-
-
-
-
-
-
Getting started
-
-
- Spaces can be used by importing the spaces using the following:
-
-
-
- {
- "npm install react-spaces --save"
- }
-
-
-
- {
- "import * as Space from 'react-spaces';"
- }
-
-
-
Types
-
-
-
-
These are supposed to be used at the top level of all spaces.
-
-
-
- <ViewPort /> - this space will take over the
- full viewport of the browser window. Resizing the browser window will automatically
- adjust the size of this space and all the nested spaces.
-
-
- <Fixed /> - this space can be given a height and optionally
- a width (by default it will size to 100% of it's container). All nested spaces will be
- contained within this fixed size space.
-
-
-
-
-
- These can be used with the top-level spaces ViewPort and Fixed{" "}
- and within other inner spaces.
-
-
-
-
- <Left /> a space anchored to the left of the parent
- container/space. A size can be specified in pixels/percent to determine its width.
-
-
- <Right /> a space anchored to the right of the parent
- container/space. A size can be specified in pixels/percent to determine its width.
-
-
- <Top /> a space anchored to the top of the parent
- container/space. A size can be specified in pixels/percent to determine its height.
-
-
- <Bottom /> a space anchored to the bottom of the parent
- container/space. A size can be specified in pixels/percent to determine its height.
-
-
-
-
-
-
- <Fill /> a space which consumes any available area left in the
- parent container/space taking into account any anchored spaces on every side.
-
-
- <Centered /> centres the content of a space horizontally and
- vertically.
-
-
- <VerticallyCentered /> centres the content of a space
- vertically.
-
-
-
-
-
-
Anchored spaces
-
-
- Anchored spaces provide spaces which can be anchored to the side of a container space. For example,
- a <Left /> space might be used for a left sidebar and a <Top />
- {" "}space might be used for a fixed heading or toolbar.
-
- Resizable spaces allow the space to be resized by dragging with the mouse. There are resizable variations of the spaces above called{" "}
- <LeftResizable />, <RightResizable />, <TopResizable />,
- and <BottomResizable />.
-
-
-
The size specified is the initial width/height of the space.
- By default, all spaces hide content that overflows the space. To make a particular space scrollable,
- set the scrollable property to true. The space will then be scrollable horizontally or vertically if
- the content overflows the space.
-
-
-
-
- {
- "const App = () => (\r\n" +
- " \r\n" +
- " \r\n" +
- " \r\n" +
- " \r\n" +
- ")"
- }
-
-
-
-
- {Description("Left", "L")}
-
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure atque nostrum officiis soluta! Vero eum dicta nemo sed nesciunt. Hic provident vero ratione deleniti, nemo dicta eaque eveniet fugiat. Nulla beatae porro commodi mollitia. Sed repellendus sapiente minus nulla possimus deleniti quibusdam corrupti consequuntur quo atque et voluptatibus veritatis eius soluta tempora vero totam, molestias sequi natus eligendi id porro est. Sunt maxime saepe quisquam alias esse illum necessitatibus consequatur deleniti illo eligendi reprehenderit, provident neque dolores fugiat voluptatum debitis. Enim mollitia voluptatem neque odio animi accusamus recusandae sapiente, illum ullam. Temporibus cum, magni laudantium, atque voluptates assumenda labore reiciendis suscipit inventore porro a perferendis necessitatibus quas nostrum blanditiis excepturi similique vero aut dicta vitae odio praesentium unde. Id eaque iure ipsum cumque quia accusantium similique quae, unde eos aliquam, eius quasi voluptate odio explicabo officia placeat ab itaque dicta laboriosam reiciendis ratione, magni ducimus nam neque. Omnis, beatae perferendis. Autem unde doloremque repudiandae perspiciatis iusto placeat eos recusandae ad quis eaque, itaque sed! Pariatur perferendis ea reiciendis blanditiis placeat autem nulla et alias consectetur suscipit, eius ex quam modi dignissimos odit nesciunt commodi architecto quas! Reiciendis expedita excepturi labore modi quis, suscipit, alias, tempore assumenda consequatur incidunt aut fuga iste atque harum magnam commodi tenetur culpa maiores tempora ullam. Ad temporibus dicta, perferendis voluptatibus accusamus dolore molestias quos repellendus consequuntur. Ipsum qui labore, optio debitis temporibus cum tempore at iure fuga nostrum voluptatem deleniti corporis praesentium voluptate a minus itaque animi molestias reprehenderit velit rem quos, magni iste ullam. Quos voluptas inventore aliquam. Beatae soluta, quos eos provident natus asperiores nesciunt eum excepturi nulla. Labore nostrum quasi id cumque dolores fuga dignissimos explicabo pariatur eos repudiandae dolorem sapiente atque corrupti, esse quidem asperiores vel minima harum reiciendis voluptatibus ea doloremque eligendi saepe. Expedita quisquam numquam quos facere tempora quidem sunt, iste maiores, minima similique ratione! Quaerat culpa facere aliquid quisquam in recusandae veritatis, ea odit doloremque impedit adipisci consequatur expedita sed, ducimus blanditiis voluptates cumque quos. Non, qui obcaecati quas ab quasi aperiam facilis accusantium assumenda necessitatibus dolorem. Beatae enim ab assumenda iusto blanditiis quo consequuntur dignissimos? Nobis distinctio neque doloribus sequi non sit consequatur, mollitia temporibus illo quo magni similique, tenetur inventore dolore alias? Laborum ducimus alias, non debitis dolore fuga ratione consectetur quae tempora! Aliquid quaerat cupiditate vero aperiam dolor! Esse exercitationem facere sed nam iste et velit, eum autem, ratione soluta repellendus, corporis eaque veniam amet hic aliquid fugiat eligendi consequuntur at itaque. Temporibus, magnam. Enim laborum iste fuga, doloribus ipsam quasi aliquid dolorum, blanditiis omnis molestiae sunt dolorem? Dolore est delectus eos quam, eius nisi possimus quaerat inventore doloremque quo eum omnis temporibus unde velit suscipit consectetur magni libero tenetur iure? Iste accusantium, id quod libero fugit omnis nobis hic velit, quam enim eius recusandae minima doloremque earum veritatis voluptatibus numquam? Neque similique omnis odit dolore eos error, saepe aperiam? Cupiditate, pariatur qui quam ut illo natus amet beatae! Pariatur quam iure nulla eum ducimus possimus odio cupiditate! Itaque aperiam magnam, beatae totam obcaecati provident quasi cum doloremque dolorum recusandae. Voluptates quo maxime perferendis, ut consectetur quis minus quidem dicta aut possimus perspiciatis dolorum corrupti tempore incidunt veritatis adipisci neque asperiores doloremque officiis fuga? Perferendis et perspiciatis labore hic quasi doloremque dolore dolorem nihil dolorum nobis quidem delectus unde dicta voluptate aspernatur veniam, doloribus obcaecati? Eveniet, esse maxime voluptatum accusantium rerum voluptatem voluptatibus? Quae nostrum, nulla eius eum accusantium labore voluptatum beatae natus fugiat, quasi illum voluptatem ullam laudantium soluta dolorum dolor mollitia. Enim voluptas odit blanditiis animi. Error deserunt facilis magni accusantium harum fuga, aperiam nemo. Labore quis delectus fuga, similique, amet pariatur dolores dolorum dolor obcaecati provident nemo cumque id explicabo ab odio. Voluptas enim pariatur distinctio exercitationem, repellendus atque animi sapiente quisquam eius accusamus, soluta in quam! Dolorum facere impedit architecto, error adipisci officiis voluptas asperiores dolores praesentium fugiat, rerum blanditiis ut nesciunt iure, earum maxime omnis? Quisquam aperiam facere libero numquam, earum ex natus tempore ad distinctio nobis rem nostrum modi, totam quo ipsam porro officiis. Quisquam cumque necessitatibus tempore esse voluptatum aliquid dicta, non nostrum, blanditiis dolorum minus officiis, corporis eligendi. Commodi tempora dolores consectetur quas deserunt, est et saepe aspernatur at earum nam alias facilis in! Quisquam error corporis facere sapiente repellat neque quaerat illo aliquam perferendis porro suscipit dolorum enim nulla deserunt asperiores rerum, sit voluptate quasi quis inventore optio provident! Asperiores, obcaecati! Amet ullam, esse laborum aperiam placeat provident vero id atque dignissimos adipisci? Molestias eveniet totam facere hic placeat est tempora consectetur praesentium! Velit fuga aliquid voluptatibus ipsum blanditiis quod, mollitia repellendus hic eos expedita? Eius nemo non deleniti itaque eum pariatur, odit, accusamus laudantium velit similique accusantium. Vero beatae recusandae, aspernatur, ipsa fuga quaerat minima rerum magnam perferendis dicta error hic at voluptate laudantium. Aspernatur mollitia cupiditate vero esse reprehenderit atque! Ad quibusdam vitae, commodi laboriosam possimus nisi modi quaerat corporis rem atque, perspiciatis iusto sunt harum repellat reiciendis. Minima sequi corporis earum, libero ut fugit nemo, recusandae ipsa, sunt atque ducimus eius odit. Minima, expedita maiores. Nemo, iste corrupti adipisci soluta, maiores blanditiis tenetur magnam voluptate non, deleniti saepe veritatis vero reprehenderit nostrum harum itaque possimus fuga? Quo, culpa rem ipsa nemo soluta alias praesentium dolore voluptatem quas doloribus dolorum, sed est quod. Facere obcaecati repellat, iusto molestias quasi illum nostrum laborum. Consequuntur quas ipsam obcaecati nulla vitae ullam quasi harum unde. Deserunt vitae suscipit est, delectus molestias a, explicabo officia quia perferendis modi sint illo, magnam similique dicta maiores tempore temporibus? Ad earum porro ab, natus facilis alias non explicabo quis minus adipisci, molestias ipsa facere perferendis, quidem quod veritatis. Expedita consequatur magni officia inventore explicabo dolore harum, ut voluptatem placeat, cumque iste deleniti cupiditate adipisci non, asperiores quas optio deserunt ipsam magnam culpa qui molestias aspernatur esse? Laudantium, id. Minima eligendi cupiditate deleniti quisquam dolores. Soluta quos hic quas, dignissimos natus enim iusto repellendus distinctio voluptates dolor perspiciatis recusandae ut deserunt! Suscipit ducimus dolore rem molestias voluptate ea doloribus temporibus ipsum, dicta consequuntur quaerat. Commodi facilis aut aliquid, asperiores id nihil!
-
-
-
-
Stacked spaces
-
-
- Anchored spaces can be stacked to provide more than one space on each side. To
- guarantee ordering from the outside of the container / parent space, you should
- specify an order.
-
- Using the Info component, you can get size information on the containing space. For live updates
- when the space size changes ensure that trackChanges is set to true on the space.
-
Add support for percentage sizing on anchored spaces
-
-
-
-
0.1.3
-
-
Added readme
-
Updated documentation
-
-
-
-
0.1.2
-
-
Removed ResizeSensor from spaces by default and now optionally allow live size updates with trackSize property
-
Added VerticallyCentered component to vertically centre content within a space
-
Allow class names to be specified on top-level spaces ViewPort and Fixed
-
-
-
-
0.1.1
-
-
Initial version
-
-
-
-
-
-
-
- );
+ if (window.location.hash === "#ui-demo")
+ {
+ return
+ }
+
+ return
}
export default App;
diff --git a/demo/src/docs/Anchored.tsx b/demo/src/docs/Anchored.tsx
new file mode 100644
index 0000000..a6f4e43
--- /dev/null
+++ b/demo/src/docs/Anchored.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Tabs } from 'antd';
+import { Description } from './Docs';
+
+export const Anchored = () => {
+ return (
+ <>
+
Anchored spaces
+
+
+ Anchored spaces provide spaces which can be anchored to the side of a container space. For example,
+ a <Left /> space might be used for a left sidebar and a <Top />
+ {" "}space might be used for a fixed heading or toolbar.
+
+ Resizable spaces allow the space to be resized by dragging with the mouse. There are resizable variations of the spaces above called{" "}
+ <LeftResizable />, <RightResizable />, <TopResizable />,
+ and <BottomResizable />.
+
+
+
The size specified is the initial width/height of the space.
+ Additional properties can be specified to constrain the resizing:
+
+
+
+
minimumSize - minimum size the space can be resized (default is 10px)
+
maximumSize - maximum size the space can be resized
+
+
+
+ {
+ "const App = () => (\r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ ")"
+ }
+
+
+
+
+ {Description("Left", "L")}
+
+
+ {Description("Fill", "F")}
+
+
+ {Description("Right", "R")}
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/docs/Scrollable.tsx b/demo/src/docs/Scrollable.tsx
new file mode 100644
index 0000000..3b7808b
--- /dev/null
+++ b/demo/src/docs/Scrollable.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Description } from './Docs';
+
+export const Scrollable = () => {
+ return (
+ <>
+
Scrollable spaces
+
+
+ By default, all spaces hide content that overflows the space. To make a particular space scrollable,
+ set the scrollable property to true. The space will then be scrollable horizontally or vertically if
+ the content overflows the space.
+
+
+
+ {
+ "const App = () => (\r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ ")"
+ }
+
+
+
+
+ {Description("Left", "L")}
+
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum iure atque nostrum officiis soluta! Vero eum dicta nemo sed nesciunt. Hic provident vero ratione deleniti, nemo dicta eaque eveniet fugiat. Nulla beatae porro commodi mollitia. Sed repellendus sapiente minus nulla possimus deleniti quibusdam corrupti consequuntur quo atque et voluptatibus veritatis eius soluta tempora vero totam, molestias sequi natus eligendi id porro est. Sunt maxime saepe quisquam alias esse illum necessitatibus consequatur deleniti illo eligendi reprehenderit, provident neque dolores fugiat voluptatum debitis. Enim mollitia voluptatem neque odio animi accusamus recusandae sapiente, illum ullam. Temporibus cum, magni laudantium, atque voluptates assumenda labore reiciendis suscipit inventore porro a perferendis necessitatibus quas nostrum blanditiis excepturi similique vero aut dicta vitae odio praesentium unde. Id eaque iure ipsum cumque quia accusantium similique quae, unde eos aliquam, eius quasi voluptate odio explicabo officia placeat ab itaque dicta laboriosam reiciendis ratione, magni ducimus nam neque. Omnis, beatae perferendis. Autem unde doloremque repudiandae perspiciatis iusto placeat eos recusandae ad quis eaque, itaque sed! Pariatur perferendis ea reiciendis blanditiis placeat autem nulla et alias consectetur suscipit, eius ex quam modi dignissimos odit nesciunt commodi architecto quas! Reiciendis expedita excepturi labore modi quis, suscipit, alias, tempore assumenda consequatur incidunt aut fuga iste atque harum magnam commodi tenetur culpa maiores tempora ullam. Ad temporibus dicta, perferendis voluptatibus accusamus dolore molestias quos repellendus consequuntur. Ipsum qui labore, optio debitis temporibus cum tempore at iure fuga nostrum voluptatem deleniti corporis praesentium voluptate a minus itaque animi molestias reprehenderit velit rem quos, magni iste ullam. Quos voluptas inventore aliquam. Beatae soluta, quos eos provident natus asperiores nesciunt eum excepturi nulla. Labore nostrum quasi id cumque dolores fuga dignissimos explicabo pariatur eos repudiandae dolorem sapiente atque corrupti, esse quidem asperiores vel minima harum reiciendis voluptatibus ea doloremque eligendi saepe. Expedita quisquam numquam quos facere tempora quidem sunt, iste maiores, minima similique ratione! Quaerat culpa facere aliquid quisquam in recusandae veritatis, ea odit doloremque impedit adipisci consequatur expedita sed, ducimus blanditiis voluptates cumque quos. Non, qui obcaecati quas ab quasi aperiam facilis accusantium assumenda necessitatibus dolorem. Beatae enim ab assumenda iusto blanditiis quo consequuntur dignissimos? Nobis distinctio neque doloribus sequi non sit consequatur, mollitia temporibus illo quo magni similique, tenetur inventore dolore alias? Laborum ducimus alias, non debitis dolore fuga ratione consectetur quae tempora! Aliquid quaerat cupiditate vero aperiam dolor! Esse exercitationem facere sed nam iste et velit, eum autem, ratione soluta repellendus, corporis eaque veniam amet hic aliquid fugiat eligendi consequuntur at itaque. Temporibus, magnam. Enim laborum iste fuga, doloribus ipsam quasi aliquid dolorum, blanditiis omnis molestiae sunt dolorem? Dolore est delectus eos quam, eius nisi possimus quaerat inventore doloremque quo eum omnis temporibus unde velit suscipit consectetur magni libero tenetur iure? Iste accusantium, id quod libero fugit omnis nobis hic velit, quam enim eius recusandae minima doloremque earum veritatis voluptatibus numquam? Neque similique omnis odit dolore eos error, saepe aperiam? Cupiditate, pariatur qui quam ut illo natus amet beatae! Pariatur quam iure nulla eum ducimus possimus odio cupiditate! Itaque aperiam magnam, beatae totam obcaecati provident quasi cum doloremque dolorum recusandae. Voluptates quo maxime perferendis, ut consectetur quis minus quidem dicta aut possimus perspiciatis dolorum corrupti tempore incidunt veritatis adipisci neque asperiores doloremque officiis fuga? Perferendis et perspiciatis labore hic quasi doloremque dolore dolorem nihil dolorum nobis quidem delectus unde dicta voluptate aspernatur veniam, doloribus obcaecati? Eveniet, esse maxime voluptatum accusantium rerum voluptatem voluptatibus? Quae nostrum, nulla eius eum accusantium labore voluptatum beatae natus fugiat, quasi illum voluptatem ullam laudantium soluta dolorum dolor mollitia. Enim voluptas odit blanditiis animi. Error deserunt facilis magni accusantium harum fuga, aperiam nemo. Labore quis delectus fuga, similique, amet pariatur dolores dolorum dolor obcaecati provident nemo cumque id explicabo ab odio. Voluptas enim pariatur distinctio exercitationem, repellendus atque animi sapiente quisquam eius accusamus, soluta in quam! Dolorum facere impedit architecto, error adipisci officiis voluptas asperiores dolores praesentium fugiat, rerum blanditiis ut nesciunt iure, earum maxime omnis? Quisquam aperiam facere libero numquam, earum ex natus tempore ad distinctio nobis rem nostrum modi, totam quo ipsam porro officiis. Quisquam cumque necessitatibus tempore esse voluptatum aliquid dicta, non nostrum, blanditiis dolorum minus officiis, corporis eligendi. Commodi tempora dolores consectetur quas deserunt, est et saepe aspernatur at earum nam alias facilis in! Quisquam error corporis facere sapiente repellat neque quaerat illo aliquam perferendis porro suscipit dolorum enim nulla deserunt asperiores rerum, sit voluptate quasi quis inventore optio provident! Asperiores, obcaecati! Amet ullam, esse laborum aperiam placeat provident vero id atque dignissimos adipisci? Molestias eveniet totam facere hic placeat est tempora consectetur praesentium! Velit fuga aliquid voluptatibus ipsum blanditiis quod, mollitia repellendus hic eos expedita? Eius nemo non deleniti itaque eum pariatur, odit, accusamus laudantium velit similique accusantium. Vero beatae recusandae, aspernatur, ipsa fuga quaerat minima rerum magnam perferendis dicta error hic at voluptate laudantium. Aspernatur mollitia cupiditate vero esse reprehenderit atque! Ad quibusdam vitae, commodi laboriosam possimus nisi modi quaerat corporis rem atque, perspiciatis iusto sunt harum repellat reiciendis. Minima sequi corporis earum, libero ut fugit nemo, recusandae ipsa, sunt atque ducimus eius odit. Minima, expedita maiores. Nemo, iste corrupti adipisci soluta, maiores blanditiis tenetur magnam voluptate non, deleniti saepe veritatis vero reprehenderit nostrum harum itaque possimus fuga? Quo, culpa rem ipsa nemo soluta alias praesentium dolore voluptatem quas doloribus dolorum, sed est quod. Facere obcaecati repellat, iusto molestias quasi illum nostrum laborum. Consequuntur quas ipsam obcaecati nulla vitae ullam quasi harum unde. Deserunt vitae suscipit est, delectus molestias a, explicabo officia quia perferendis modi sint illo, magnam similique dicta maiores tempore temporibus? Ad earum porro ab, natus facilis alias non explicabo quis minus adipisci, molestias ipsa facere perferendis, quidem quod veritatis. Expedita consequatur magni officia inventore explicabo dolore harum, ut voluptatem placeat, cumque iste deleniti cupiditate adipisci non, asperiores quas optio deserunt ipsam magnam culpa qui molestias aspernatur esse? Laudantium, id. Minima eligendi cupiditate deleniti quisquam dolores. Soluta quos hic quas, dignissimos natus enim iusto repellendus distinctio voluptates dolor perspiciatis recusandae ut deserunt! Suscipit ducimus dolore rem molestias voluptate ea doloribus temporibus ipsum, dicta consequuntur quaerat. Commodi facilis aut aliquid, asperiores id nihil!
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/docs/SizingInfo.tsx b/demo/src/docs/SizingInfo.tsx
new file mode 100644
index 0000000..6c35eac
--- /dev/null
+++ b/demo/src/docs/SizingInfo.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+export const SizingInfo = () => {
+ return (
+ <>
+
Getting size information for a space
+
+
+ Using the Info component, you can get size information on the containing space. For live updates
+ when the space size changes ensure that trackChanges is set to true on the space.
+
+
+
+ {
+ "const App = () => (\r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ " {info => {info.width}px x {info.height}px}\r\n" +
+ " \r\n" +
+ " \r\n" +
+ " \r\n" +
+ ")"
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/docs/Stacked.tsx b/demo/src/docs/Stacked.tsx
new file mode 100644
index 0000000..7c2b123
--- /dev/null
+++ b/demo/src/docs/Stacked.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Description } from './Docs';
+import { Tabs } from 'antd';
+
+export const Stacked = () => {
+ return (
+ <>
+
Stacked spaces
+
+
+ Anchored spaces can be stacked to provide more than one space on each side. To
+ guarantee ordering from the outside of the container / parent space, you should
+ specify an order.
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/docs/Types.tsx b/demo/src/docs/Types.tsx
new file mode 100644
index 0000000..72baf1d
--- /dev/null
+++ b/demo/src/docs/Types.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Tabs } from 'antd';
+
+export const Types = () => {
+ return (
+ <>
+
Types
+
+
+
+
These are supposed to be used at the top level of all spaces.
+
+
+
+ <ViewPort /> - this space will take over the
+ full viewport of the browser window. Resizing the browser window will automatically
+ adjust the size of this space and all the nested spaces.
+
+
+ <Fixed /> - this space can be given a height and optionally
+ a width (by default it will size to 100% of it's container). All nested spaces will be
+ contained within this fixed size space.
+
+
+
+
+
+ These can be used with the top-level spaces ViewPort and Fixed{" "}
+ and within other inner spaces.
+
+
+
+
+ <Left /> a space anchored to the left of the parent
+ container/space. A size can be specified in pixels/percent to determine its width.
+
+
+ <Right /> a space anchored to the right of the parent
+ container/space. A size can be specified in pixels/percent to determine its width.
+
+
+ <Top /> a space anchored to the top of the parent
+ container/space. A size can be specified in pixels/percent to determine its height.
+
+
+ <Bottom /> a space anchored to the bottom of the parent
+ container/space. A size can be specified in pixels/percent to determine its height.
+
+
+
+
+
+
+ <Fill /> a space which consumes any available area left in the
+ parent container/space taking into account any anchored spaces on every side.
+
+
+ <Centered /> centres the content of a space horizontally and
+ vertically.
+
+
+ <VerticallyCentered /> centres the content of a space
+ vertically.
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/docs/VersionHistory.tsx b/demo/src/docs/VersionHistory.tsx
new file mode 100644
index 0000000..dd52c51
--- /dev/null
+++ b/demo/src/docs/VersionHistory.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+export const VersionHistory = () => {
+ return (
+ <>
+
Version history
+
+
+
0.1.4
+
+
Add support for percentage sizing on anchored spaces
+
+
+
+
0.1.3
+
+
Added readme
+
Updated documentation
+
+
+
+
0.1.2
+
+
Removed ResizeSensor from spaces by default and now optionally allow live size updates with trackSize property
+
Added VerticallyCentered component to vertically centre content within a space
+
Allow class names to be specified on top-level spaces ViewPort and Fixed
+
+
+
+
0.1.1
+
+
Initial version
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/demo/src/ui-demo/Anchored.tsx b/demo/src/ui-demo/Anchored.tsx
new file mode 100644
index 0000000..276fbf2
--- /dev/null
+++ b/demo/src/ui-demo/Anchored.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Tabs } from 'antd';
+import { Description } from '../docs/Docs';
+
+export const Anchored = () => {
+ return (
+ <>
+
Anchored spaces
+
+
+ Anchored spaces provide spaces which can be anchored to the side of a container space. For example,
+ a <Left /> space might be used for a left sidebar and a <Top />
+ {" "}space might be used for a fixed heading or toolbar.
+
-