├── .gitignore
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-addressbar
 2 | Take control of the addressbar in a reactive way
 3 | 
 4 | This component depends on [addressbar](https://github.com/christianalfoni/addressbar), a library that makes the addressbar work like an input. This means that you can work with the addressbar just like you do with a normal input. Typically you would combine this with something like [url-mapper](https://github.com/christianalfoni/url-mapper) to create your own flexible and custom routing logic.
 5 | 
 6 | `npm install react-addressbar`
 7 | 
 8 | ```js
 9 | var React = require('react');
10 | var Addressbar = require('react-addressbar');
11 | 
12 | var Test = React.createClass({
13 |   getInitialState: function () {
14 |     return {
15 |       url: '/'
16 |     };
17 |   },
18 |   onChange: function (url) {
19 |     this.setState({
20 |       url: url
21 |     });
22 |   },
23 |   render: function () {
24 |     return (
25 |       <div>
26 |         <Addressbar onChange={this.onChange} value={this.state.url}/>
27 |         <h1>Hello!</h1>
28 |         <a href="/foo">foo</a> <a href="/bar">bar</a>
29 |       </div>
30 |     );
31 |   }
32 | });
33 | 
34 | React.render(<Test/>, document.body);
35 | ```
36 | 
37 | When addressbar is used it will by default take full control of the addressbar. If you only want to take control of hash changes, use `onlyHash` as a property.
38 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var addressbar = require('addressbar');
 2 | var React = require('react');
 3 | 
 4 | module.exports = React.createClass({
 5 |   propTypes: {
 6 |     onChange: React.PropTypes.func.isRequired,
 7 |     value: React.PropTypes.string.isRequired
 8 |   },
 9 |   componentWillMount: function () {
10 |     addressbar.on('change', this.onUrlChange);
11 |   },
12 |   componentWillUnmount: function () {
13 |     addressbar.removeListener('change', this.onUrlChange);
14 |   },
15 |   componentDidUpdate: function () {
16 |     addressbar.value = this.props.value;
17 |   },
18 |   componentDidMount: function () {
19 |     addressbar.value = this.props.value;
20 |   },
21 |   onUrlChange: function (event) {
22 |     if (this.props.onlyHash && event.target.value.indexOf('#') === -1) {
23 |       return;
24 |     }
25 |     event.preventDefault();
26 |     this.props.onChange(event.target.value);
27 |   },
28 |   render: function () {
29 |     return null;
30 |   }
31 | });
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-addressbar",
 3 |   "version": "0.1.4",
 4 |   "description": "Take control of the addressbar in a reactive way",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/christianalfoni/react-addressbar.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "router",
16 |     "url",
17 |     "state"
18 |   ],
19 |   "author": "Christian Alfoni",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/christianalfoni/react-addressbar/issues"
23 |   },
24 |   "homepage": "https://github.com/christianalfoni/react-addressbar#readme",
25 |   "dependencies": {
26 |     "addressbar": "^0.1.x"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------