Skip to content

Commit 3318d9d

Browse files
aeagleaeagle
committed
2 parents 7dfa530 + e95b1b0 commit 3318d9d

File tree

1 file changed

+163
-0
lines changed

1 file changed

+163
-0
lines changed

‎README.md

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
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+
npm i react-spaces
33+
```
34+
35+
```typescript
36+
import * as Spaces from 'react-spaces';
37+
```
38+
39+
## Non-resizable spaces
40+
41+
Non-resizable spaces provide layout but can not be resized by user interaction.
42+
43+
[Example on codesandbox.io](https://codesandbox.io/s/react-shapes-left-right-spaces-ml4kl?fontsize=14)
44+
45+
### Left and right spaces
46+
47+
```typescript
48+
const App = () => (
49+
<Space.Fixed height={400}>
50+
<Space.Left size={200} />
51+
<Space.Fill />
52+
<Space.Right size={200} />
53+
</Space.Fixed>
54+
)
55+
```
56+
57+
### Top and bottom spaces
58+
59+
```typescript
60+
const App = () => (
61+
<Space.Fixed height={400}>
62+
<Space.Top size={100} />
63+
<Space.Fill />
64+
<Space.Bottom size={100} />
65+
</Space.Fixed>
66+
)
67+
```
68+
69+
## Resizable spaces
70+
71+
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.
72+
73+
### Left and right resizable spaces
74+
75+
```typescript
76+
const App = () => (
77+
<Space.ViewPort>
78+
<Space.LeftResizable size={200} />
79+
<Space.Fill />
80+
<Space.RightResizable size={200} />
81+
</Space.ViewPort>
82+
)
83+
```
84+
85+
### Top and bottom resizable spaces
86+
87+
```typescript
88+
const App = () => (
89+
<Space.Fixed height={400}>
90+
<Space.TopResizable size={100} />
91+
<Space.Fill />
92+
<Space.BottomResizable size={100} />
93+
</Space.Fixed>
94+
)
95+
```
96+
97+
Additional properties can be specified to constrain the resizing:
98+
99+
* **minimumSize** - minimum size the space can be resized (default is 10px)
100+
* **maximumSize** - maximum size the space can be resized
101+
102+
*** Resizable spaces with constrained minimum and maximum sizes
103+
104+
```typescript
105+
const App = () => (
106+
<Space.Fixed height={400}>
107+
<Space.LeftResizable size={200} minimumSize={150} maximumSize={250} />
108+
<Space.Fill />
109+
<Space.RightResizable size={200} minimumSize={150} maximumSize={250} />
110+
</Space.Fixed>
111+
)
112+
```
113+
** Nested spaces
114+
115+
Spaces can be nested within other spaces to create complex layouts.
116+
117+
*** Left/right spaces nested within top/full/bottom spaces
118+
119+
```typescript
120+
const App = () => (
121+
<Space.Fixed height={400}>
122+
<Space.TopResizable size={100} />
123+
<Space.Fill>
124+
<Space.LeftResizable size={150} />
125+
<Space.Fill />
126+
<Space.RightResizable size={150} />
127+
</Space.Fill>
128+
<Space.BottomResizable size={100} />
129+
</Space.Fixed>
130+
)
131+
```
132+
133+
### Top/bottom spaces nested within left/full/right spaces
134+
135+
```typescript
136+
const App = () => (
137+
<Space.Fixed height={400}>
138+
<Space.LeftResizable size={150} />
139+
<Space.Fill>
140+
<Space.TopResizable size={100} />
141+
<Space.Fill />
142+
<Space.BottomResizable size={100} />
143+
</Space.Fill>
144+
<Space.RightResizable size={150} />
145+
</Space.Fixed>
146+
)
147+
```
148+
149+
## Stacked spaces
150+
151+
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.
152+
153+
### Stacked Left/right spaces
154+
155+
```typescript
156+
const App = () => (
157+
<Space.Fixed height={400}>
158+
<Space.LeftResizable size={125} />
159+
<Space.LeftResizable size={125} />
160+
<Space.Fill />
161+
</Space.Fixed>
162+
)
163+
```

0 commit comments

Comments
 (0)