https://github.com/platzidev/react-url
A React.js High-Order Component and decorator for parsing and resolving URLs inside your application.
https://github.com/platzidev/react-url
Last synced: about 1 year ago
JSON representation
A React.js High-Order Component and decorator for parsing and resolving URLs inside your application.
- Host: GitHub
- URL: https://github.com/platzidev/react-url
- Owner: PlatziDev
- License: bsd-3-clause
- Created: 2016-04-28T17:38:37.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-08-10T02:57:38.000Z (almost 10 years ago)
- Last Synced: 2025-03-22T17:11:29.384Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 48
- Watchers: 55
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-url
A React.js High-Order Component and decorator for parsing and resolving URLs inside your application.
## Installation
```bash
npm i -S react react-url
```
## API
### URLProvider
```javascript
import { render } from 'react-dom';
import { URLProvider } from 'react-url';
import App from './containers/App';
const urls = {
profile: '/profile/:username/',
};
render(
,
document.body,
);
```
* `URLProvider` is a High-Order Component.
* `URLProvider` expect only one property named `urls`.
* `urls` should be an object where the keys are the URLs names and the values are the unparsed url using the syntax of Express.js.
### connectURL
```javascript
import React, { Component } from 'react';
import { connectURL } from 'react-url';
function mapURLToProps(getURL, props) {
return {
profileURL: getURL('profile', { username: props.username }),
};
}
@connectURL(mapURLToProps)
class UserData extends Component { ... }
export default UserData;
```
* The `connectURL` argument (`mapURLToProps`) it's optional.
* If you don't supply it then it will add the `getURL` function as a property.
* The `mapURLToProps` function will receive the `getURL` function and `props` object as parameter and should return an object.
* The `getURL` function receive the URL name and an object with the parameters to use in it and return the parsed URL.
* You can use it as a decorator (like the example above) or just as a function and send them the component to connect.
### parser
```javascript
import { parser } from 'react-url';
const urls = {
profile: '/profile/:username/',
};
const profileURL = parser(urls, 'profile', {
username: 'sergiodxa',
});
```
* This is a Low-Level API and is used internally for the `connectURL` decorator, it's not expected that you use it directly.
* `parser` receive as arguments the `urls` map, the URL name and the options/parameters object.
* It will return the final parsed url string.