|
| 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