Skip to content

Commit d3f51b6

Browse files
aeagleaeagle
committed
Merge branch 'master' of https://github.com/aeagle/react-spaces
# Conflicts: # demo/src/App.tsx
2 parents e9bb80e + 4734c7e commit d3f51b6

File tree

6 files changed

+577
-623
lines changed

6 files changed

+577
-623
lines changed

‎README.md‎

Lines changed: 20 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,48 @@
11
# React Spaces
22

3-
React Spaces allows you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.
3+
![NPM](https://img.shields.io/npm/v/react-spaces.svg)
44

5-
[View examples here](http://www.allaneagle.com/react-spaces/demo/)
5+
React Spaces allow you to divide a page or container HTML element into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.
66

77
### Top level spaces
88

99
Used at the top level of all other spaces.
1010

11-
* **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.
12-
13-
* **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.
14-
15-
### Inner spaces
16-
17-
These can be used within the top-level spaces **ViewPort** and **Fixed** or nested within other spaces.
18-
19-
* **Left** / **Right** - a space anchored to the left or right of the parent container/space. A size can be specified in pixels to determine its width.
11+
**ViewPort**
2012

21-
* **Top** / **Bottom** - a space anchored to the top or bottom of the parent container/space. A size can be specified in pixels to determine its height.
22-
23-
* **Fill** - a space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
24-
25-
## Getting started
26-
27-
Spaces can be used by using the following:
28-
29-
```typescript
30-
npm i react-spaces
31-
```
13+
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.
3214

33-
```typescript
34-
import * as Spaces from 'react-spaces';
35-
```
36-
37-
## Non-resizable spaces
38-
39-
Non-resizable spaces provide layout but can not be resized by user interaction.
40-
41-
### Left and right spaces
42-
43-
```typescript
44-
const App = () => (
45-
<Space.Fixed height={400}>
46-
<Space.Left size={200} />
47-
<Space.Fill />
48-
<Space.Right size={200} />
49-
</Space.Fixed>
50-
)
51-
```
52-
53-
### Top and bottom spaces
54-
55-
```typescript
56-
const App = () => (
57-
<Space.Fixed height={400}>
58-
<Space.Top size={100} />
59-
<Space.Fill />
60-
<Space.Bottom size={100} />
61-
</Space.Fixed>
62-
)
63-
```
15+
**Fixed**
6416

65-
## Resizable spaces
17+
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.
6618

67-
Resizable spaces allow the space to be resized by dragging with the mouse. The size specified is the initial width/height of the space. There are resizable variations of the spaces above called **LeftResizable**, **RightResizable**, **TopResizable**, and **BottomResizable**.
68-
69-
### Left and right resizable spaces
70-
71-
```typescript
72-
const App = () => (
73-
<Space.ViewPort>
74-
<Space.LeftResizable size={200} />
75-
<Space.Fill />
76-
<Space.RightResizable size={200} />
77-
</Space.ViewPort>
78-
)
79-
```
80-
81-
### Top and bottom resizable spaces
82-
83-
```typescript
84-
const App = () => (
85-
<Space.Fixed height={400}>
86-
<Space.TopResizable size={100} />
87-
<Space.Fill />
88-
<Space.BottomResizable size={100} />
89-
</Space.Fixed>
90-
)
91-
```
19+
### Inner spaces
9220

93-
Additional properties can be specified to constrain the resizing:
21+
These can be used within the top-level spaces **ViewPort** and **Fixed** or nested within other spaces.
9422

95-
* **minimumSize** - minimum size the space can be resized (default is 10px)
96-
* **maximumSize** - maximum size the space can be resized
23+
**Left** / **Right**
9724

98-
### Resizable spaces with constrained minimum and maximum sizes
25+
A space anchored to the left or right of the parent container/space. A size can be specified in pixels to determine its width.
9926

100-
```typescript
101-
const App = () => (
102-
<Space.Fixed height={400}>
103-
<Space.LeftResizable size={200} minimumSize={150} maximumSize={250} />
104-
<Space.Fill />
105-
<Space.RightResizable size={200} minimumSize={150} maximumSize={250} />
106-
</Space.Fixed>
107-
)
108-
```
27+
**Top** / **Bottom**
10928

110-
## Nested spaces
29+
A space anchored to the top or bottom of the parent container/space. A size can be specified in pixels to determine its height.
11130

112-
Spaces can be nested within other spaces to create complex layouts.
31+
**Fill**
11332

114-
### Left/right spaces nested within top/full/bottom spaces
33+
A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
11534

116-
```typescript
117-
const App = () => (
118-
<Space.Fixed height={400}>
119-
<Space.TopResizable size={100} />
120-
<Space.Fill>
121-
<Space.LeftResizable size={150} />
122-
<Space.Fill />
123-
<Space.RightResizable size={150} />
124-
</Space.Fill>
125-
<Space.BottomResizable size={100} />
126-
</Space.Fixed>
127-
)
128-
```
35+
## Getting started
12936

130-
### Top/bottom spaces nested within left/full/right spaces
37+
To get started with React Spaces you need:
13138

13239
```typescript
133-
const App = () => (
134-
<Space.Fixed height={400}>
135-
<Space.LeftResizable size={150} />
136-
<Space.Fill>
137-
<Space.TopResizable size={100} />
138-
<Space.Fill />
139-
<Space.BottomResizable size={100} />
140-
</Space.Fill>
141-
<Space.RightResizable size={150} />
142-
</Space.Fixed>
143-
)
40+
npm install react-spaces --save
14441
```
14542

146-
## Stacked spaces
147-
148-
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.
149-
150-
### Stacked left spaces
151-
15243
```typescript
153-
const App = () => (
154-
<Space.Fixed height={400}>
155-
<Space.LeftResizable size={125} order={1} />
156-
<Space.LeftResizable size={125} order={2} />
157-
<Space.Fill />
158-
</Space.Fixed>
159-
)
44+
import * as Spaces from 'react-spaces';
16045
```
16146

162-
## Scrollable spaces
163-
164-
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.
165-
166-
## Getting size information for a space
167-
168-
Using the **Info** component, you can get size information on the containing space.
169-
170-
```typescript
171-
const App = () => (
172-
<Space.Fixed height={400}>
173-
<Space.Fill>
174-
<Space.Info>
175-
{info => <span>{info.width}px x {info.height}px</span>}
176-
</Space.Info>
177-
</Space.Fill>
178-
</Space.Fixed>
179-
)
180-
```
47+
View full documentation here:
48+
[View examples here](http://www.allaneagle.com/react-spaces/demo/)

‎demo/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>React Spaces - Divide and conquer your page</title>
2323
</head>
2424
<body>
2525
<noscript>You need to enable JavaScript to run this app.</noscript>

‎demo/src/App.scss‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ pre {
4848
padding: 25px !important;
4949
}
5050

51-
.examples {
51+
.main {
5252
.spaces-fixedsize-layout {
5353
margin: 0 25px;
5454
font-size: 14px;
@@ -82,4 +82,26 @@ pre {
8282
right: -60px;
8383
z-index: 100000;
8484
}
85+
}
86+
87+
@media (max-width: 800px)
88+
{
89+
#forkongithub {
90+
display: none;
91+
}
92+
93+
.sidebar {
94+
display: none;
95+
}
96+
97+
.main {
98+
position: fixed;
99+
left: inherit !important;
100+
right: inherit !important;
101+
top: 80px !important;
102+
bottom: inherit !important;
103+
height: inherit !important;
104+
width: 100% !important;
105+
overflow: auto !important;
106+
}
85107
}

0 commit comments

Comments
 (0)