Skip to content

Commit 6eec31a

Browse files
aeagleaeagle
authored
Update README.md
1 parent 35b926b commit 6eec31a

File tree

1 file changed

+19
-153
lines changed

1 file changed

+19
-153
lines changed

‎README.md

Lines changed: 19 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,180 +1,46 @@
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.
4-
5-
[View examples here](http://www.allaneagle.com/react-spaces/demo/)
3+
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.
64

75
### Top level spaces
86

97
Used at the top level of all other spaces.
108

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.
20-
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-
```
32-
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
9+
**ViewPort**
5410

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-
```
64-
65-
## Resizable spaces
66-
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**.
11+
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.
6812

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-
```
13+
**Fixed**
8014

81-
### Top and bottom resizable spaces
15+
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.
8216

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-
```
17+
### Inner spaces
9218

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

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

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

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-
```
25+
**Top** / **Bottom**
10926

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

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

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

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-
```
33+
## Getting started
12934

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

13237
```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-
)
38+
npm i react-spaces
14439
```
14540

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-
15241
```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-
)
42+
import * as Spaces from 'react-spaces';
16043
```
16144

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-
```
45+
View full documentation here:
46+
[View examples here](http://www.allaneagle.com/react-spaces/demo/)

0 commit comments

Comments
 (0)