Skip to content

Commit 9232d1f

Browse files
author
Sergio Daniel Xalambrí
committed
[add] readme file with usage documentation
1 parent 09a0f33 commit 9232d1f

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed

README.md

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# react-url
2+
A React.js High-Order Component and decorator for parsing and resolving URLs inside your application.
3+
4+
## Installation
5+
```bash
6+
npm i -S react react-url
7+
```
8+
9+
## API
10+
### URLProvider
11+
```javascript
12+
import { render } from 'react-dom';
13+
import { URLProvider } from 'react-url';
14+
15+
import App from './containers/App';
16+
17+
const urls = {
18+
profile: '/profile/:username/',
19+
};
20+
21+
render(
22+
<URLProvider urls={urls}>
23+
<App />
24+
</URLProvider>,
25+
document.body,
26+
);
27+
```
28+
* `URLProvider` is a High-Order Components
29+
* `URLProvider` expect only one property named `urls`.
30+
* `urls` should be an object where the keys are the URLs names and the values are the unparsed url using the sintax of Express.js.
31+
32+
### connectURL
33+
```javascript
34+
import React, { Component } from 'react';
35+
import { connectURL } from 'react-url';
36+
37+
function mapURLToProps(getURL, props) {
38+
return {
39+
profileURL: getURL('profile', { username: props.username }),
40+
};
41+
}
42+
43+
@connectURL(mapURLToProps)
44+
class UserData extends Component { ... }
45+
46+
export default UserData;
47+
```
48+
* The `connectURL` it's optional.
49+
* If you don't supply it then it will add the `getURL` function as a property.
50+
* The `mapURLToProps` function will receive the `getURL` function and `props` object as parameter and should return an object.
51+
* You can use it as a decorator (like the example above) or just as a function and send them the component to connect.
52+
53+
### parser
54+
```javascript
55+
import { parser } from 'react-url';
56+
57+
const urls = {
58+
profile: '/profile/:username/',
59+
};
60+
61+
const profileURL = parser(urls, 'profile', {
62+
username: 'sergiodxa',
63+
});
64+
```
65+
* This is a Low-Level API and this used internally for the `connectURL` decorator, it's not expected that you should use it.
66+
* `parser` receive as arguments the `urls` map, the url name and the options/parameters object.
67+
* It will return the final parsed url string.

0 commit comments

Comments
 (0)