Skip to content

Commit 02a2f25

Browse files
committed
Fixed NPM readme
1 parent 2b896e4 commit 02a2f25

File tree

2 files changed

+90
-1
lines changed

2 files changed

+90
-1
lines changed

react-spaces/README.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# React Spaces
2+
3+
![NPM](https://img.shields.io/npm/v/react-spaces.svg) ![Azure Pipelines](https://allan-eagle.visualstudio.com/All%20projects/_apis/build/status/React-Spaces%20publish)
4+
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.
6+
7+
View full documentation [here](https://www.allaneagle.com/react-spaces/demo/).
8+
9+
<img src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" width="100%" />
10+
11+
### Top level spaces
12+
13+
Used at the top level of all other spaces.
14+
15+
**\<ViewPort \/>**
16+
17+
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.
18+
19+
**\<Fixed /\>**
20+
21+
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.
22+
23+
### Anchored spaces
24+
25+
These can be used within the top-level spaces **\<ViewPort /\>** and **\<Fixed /\>** or nested within other spaces.
26+
27+
**\<Left /\>** and **\<Right /\>**
28+
29+
A space anchored to the left or right of the parent container/space. A size can be specified in pixels or as a percentage to determine its width.
30+
31+
**\<Top /\>** and **\<Bottom /\>**
32+
33+
A space anchored to the top or bottom of the parent container/space. A size can be specified in pixels or as a percentage to determine its height.
34+
35+
There are resizable versions of these components called **\<LeftResizable /\>**, **\<RightResizable /\>**, **\<TopResizable /\>** and **\<BottomResizable /\>** which allow the spaces to be resized from the outer edge by dragging with the mouse.
36+
37+
### Other
38+
39+
**\<Fill /\>**
40+
41+
A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
42+
43+
**\<Layer /\>**
44+
45+
Layers allow you to create layers within a parent space, for example:
46+
47+
```html
48+
<ViewPort>
49+
50+
<Layer zIndex={0}>
51+
<LeftResizable size="20%" /> // floating sidebar
52+
</Layer>
53+
54+
<Layer zIndex={1}>
55+
<Fill />
56+
</Layer>
57+
58+
</ViewPort>
59+
```
60+
61+
**\<Centered /\>**
62+
63+
Centres the content of a space horizontally and vertically.
64+
65+
**\<CenteredVertically /\>**
66+
67+
Centres the content of a space vertically.
68+
69+
## Getting started
70+
71+
To get started with React Spaces you need:
72+
73+
```typescript
74+
npm install react-spaces --save
75+
```
76+
77+
```typescript
78+
import * as Spaces from 'react-spaces';
79+
```
80+
81+
View full documentation [here](https://www.allaneagle.com/react-spaces/demo/).
82+
83+
## Donation
84+
If you find this library useful, consider making a small donation to fund a cup of coffee:
85+
86+
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AAYPWGUQBUDAA"
87+
title="If you find this library useful, consider making a small donation to fund a cup of coffee" alt="Make Donation" style="text-decoration: none;">
88+
<img src="https://www.allaneagle.com/donation.png" />
89+
</a>

react-spaces/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spaces",
3-
"version": "0.1.23",
3+
"version": "0.1.24",
44
"main": "dist/index.js",
55
"module": "dist/es/index.js",
66
"types": "dist/index.d.ts",

0 commit comments

Comments
 (0)