Skip to content

Commit aa5f73c

Browse files
aeagleaeagle
authored
Create README.md
1 parent c62cb18 commit aa5f73c

File tree

1 file changed

+157
-0
lines changed

1 file changed

+157
-0
lines changed

‎README.md

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
# React Spaces
2+
3+
React Spaces allows you to divide a page or container into spaces. These spaces know how to behave in relation to each other and can also be divided into further nested spaces.
4+
5+
## Top level spaces
6+
7+
These are supposed to be used at the top level of all spaces.
8+
9+
ViewPort - a top level space. 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.
10+
11+
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.
12+
13+
## Inner spaces
14+
15+
These can be used with the top-level spaces ViewPort and Fixed and within other inner spaces.
16+
17+
* **Left** - a space anchored to the left of the parent container/space. A size can be specified in pixels to determine its width.
18+
19+
* **Right** - a space anchored to the right of the parent container/space. A size can be specified in pixels to determine its width.
20+
21+
* **Top** - a space anchored to the top of the parent container/space. A size can be specified in pixels to determine its height.
22+
23+
* **Bottom** - a space anchored to the bottom of the parent container/space. A size can be specified in pixels to determine its height.
24+
25+
* **Fill** - a space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
26+
27+
## Getting started
28+
29+
Spaces can be used by importing the spaces using the following:
30+
31+
```typescript
32+
import * as Spaces from 'react-spaces';
33+
```
34+
35+
## Non-resizable spaces
36+
37+
Non-resizable spaces provide layout but can not be resized by user interaction.
38+
39+
### Left and right spaces
40+
41+
```typescript
42+
const App = () => (
43+
<Space.Fixed height={400}>
44+
<Space.Left size={200} />
45+
<Space.Fill />
46+
<Space.Right size={200} />
47+
</Space.Fixed>
48+
)
49+
```
50+
51+
### Top and bottom spaces
52+
53+
```typescript
54+
const App = () => (
55+
<Space.Fixed height={400}>
56+
<Space.Top size={100} />
57+
<Space.Fill />
58+
<Space.Bottom size={100} />
59+
</Space.Fixed>
60+
)
61+
```
62+
63+
## Resizable spaces
64+
65+
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 calledLeftResizable, RightResizable, TopResizable, and BottomResizable.
66+
67+
### Left and right resizable spaces
68+
69+
```typescript
70+
const App = () => (
71+
<Space.Fixed height={400}>
72+
<Space.LeftResizable size={200} />
73+
<Space.Fill />
74+
<Space.RightResizable size={200} />
75+
</Space.Fixed>
76+
)
77+
```
78+
79+
### Top and bottom resizable spaces
80+
81+
```typescript
82+
const App = () => (
83+
<Space.Fixed height={400}>
84+
<Space.TopResizable size={100} />
85+
<Space.Fill />
86+
<Space.BottomResizable size={100} />
87+
</Space.Fixed>
88+
)
89+
```
90+
91+
Additional properties can be specified to constrain the resizing:
92+
93+
* **minimumSize** - minimum size the space can be resized (default is 10px)
94+
* **maximumSize** - maximum size the space can be resized
95+
96+
*** Resizable spaces with constrained minimum and maximum sizes
97+
98+
```typescript
99+
const App = () => (
100+
<Space.Fixed height={400}>
101+
<Space.LeftResizable size={200} minimumSize={150} maximumSize={250} />
102+
<Space.Fill />
103+
<Space.RightResizable size={200} minimumSize={150} maximumSize={250} />
104+
</Space.Fixed>
105+
)
106+
```
107+
** Nested spaces
108+
109+
Spaces can be nested within other spaces to create complex layouts.
110+
111+
*** Left/right spaces nested within top/full/bottom spaces
112+
113+
```typescript
114+
const App = () => (
115+
<Space.Fixed height={400}>
116+
<Space.TopResizable size={100} />
117+
<Space.Fill>
118+
<Space.LeftResizable size={150} />
119+
<Space.Fill />
120+
<Space.RightResizable size={150} />
121+
</Space.Fill>
122+
<Space.BottomResizable size={100} />
123+
</Space.Fixed>
124+
)
125+
```
126+
127+
### Top/bottom spaces nested within left/full/right spaces
128+
129+
```typescript
130+
const App = () => (
131+
<Space.Fixed height={400}>
132+
<Space.LeftResizable size={150} />
133+
<Space.Fill>
134+
<Space.TopResizable size={100} />
135+
<Space.Fill />
136+
<Space.BottomResizable size={100} />
137+
</Space.Fill>
138+
<Space.RightResizable size={150} />
139+
</Space.Fixed>
140+
)
141+
```
142+
143+
## Stacked spaces
144+
145+
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.
146+
147+
### Stacked Left/right spaces
148+
149+
```typescript
150+
const App = () => (
151+
<Space.Fixed height={400}>
152+
<Space.LeftResizable size={125} />
153+
<Space.LeftResizable size={125} />
154+
<Space.Fill />
155+
</Space.Fixed>
156+
)
157+
```

0 commit comments

Comments
 (0)