Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
flux-router-component
Advanced tools
flux-router-component - npm Package Compare versions
Comparing version 0.5.4 to 0.5.5
@@ -16,2 +16,6 @@ /** | ||
| displayName: 'NavLink', | ||
| contextTypes: { | ||
| executeAction: React.PropTypes.func, | ||
| makePath: React.PropTypes.func | ||
| }, | ||
| propTypes: { | ||
@@ -45,3 +49,9 @@ context: React.PropTypes.object.isRequired | ||
| var context = this.props.context; | ||
| var context; | ||
| if (this.context && this.context.executeAction) { | ||
| context = this.context; | ||
| } else if (this.props.context && this.props.context.executeAction) { | ||
| context = this.props.context; | ||
| } | ||
| if (context) { | ||
@@ -60,5 +70,11 @@ e.preventDefault(); | ||
| render: function() { | ||
| var context = this.props.context; | ||
| var context; | ||
| if (this.context && this.context.makePath) { | ||
| context = this.context; | ||
| } else if (this.props.context && this.props.context.makePath) { | ||
| context = this.props.context; | ||
| } | ||
| var routeName = this.props.routeName; | ||
| if (!this.props.href && routeName && context && context.makePath) { | ||
| if (!this.props.href && routeName && context) { | ||
| this.props.href = context.makePath(routeName, this.props.navParams); | ||
@@ -65,0 +81,0 @@ } |
@@ -34,7 +34,13 @@ /** | ||
| componentDidMount: function() { | ||
| var self = this, | ||
| context = self.props.context, | ||
| urlFromHistory, | ||
| urlFromState; | ||
| var self = this; | ||
| var context; | ||
| var urlFromHistory; | ||
| var urlFromState; | ||
| if (self.context && self.context.executeAction) { | ||
| context = self.context; | ||
| } else if (self.props.context && self.props.context.executeAction) { | ||
| context = self.props.context; | ||
| } | ||
| self._history = ('function' === typeof self.props.historyCreator) ? self.props.historyCreator() : new History(); | ||
@@ -41,0 +47,0 @@ self._enableScroll = (self.props.enableScroll !== false); |
| { | ||
| "name": "flux-router-component", | ||
| "version": "0.5.4", | ||
| "version": "0.5.5", | ||
| "description": "Router-related React component and mixin for applications with Flux architecture", | ||
@@ -36,3 +36,3 @@ "main": "index.js", | ||
| "istanbul": "^0.3.2", | ||
| "jsdom": "^2.0.0", | ||
| "jsdom": "^3.0.2", | ||
| "jshint": "^2.5.1", | ||
@@ -39,0 +39,0 @@ "lodash": "^2.4.1", |
@@ -9,4 +9,22 @@ # flux-router-component | ||
| Provides navigational React components and router mixin for applications built with [Flux](http://facebook.github.io/react/docs/flux-overview.html) architecture. Please check out [examples](https://github.com/yahoo/flux-router-component/tree/master/examples) of how to use these components. | ||
| Provides navigational React components (`NavLink`) and router mixin (`RouterMixin`) for applications built with [Flux](http://facebook.github.io/react/docs/flux-overview.html) architecture. Please check out [examples](https://github.com/yahoo/flux-router-component/tree/master/examples) of how to use these components. | ||
| ## Context and Expected Context Methods | ||
| Before we explain how to use `NavLink` and `RouterMixin`, lets start with two methods they expect: | ||
| * `executeAction(navigateAction, payload)` - This executes navigate action, switches the app to the new route, and update the url. | ||
| * `makePath(routeName, routeParams)` - This is used to generate url for a given route. | ||
| These two methods need to be available in: | ||
| * the React context of the component (access via `this.context` in the component), or | ||
| * the `context` prop of the component (`this.props.context`) | ||
| * If exists in both `this.context` and `this.props.context`, the one in `this.context` takes higher precedence. | ||
| An example of such context is the `ComponentContext` provided by [fluxible-plugin-routr](https://github.com/yahoo/fluxible-plugin-routr/blob/master/lib/routr-plugin.js#L36), which is a plugin for [fluxible](https://github.com/yahoo/fluxible). We have a more sophisticated example application, [routing](https://github.com/yahoo/flux-examples/tree/master/routing), showing how everything works together. | ||
| **Note** that React context is an undocumented feature, so its API could change without notice. Here is [a blog from Dave King](https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html) that explains what it is and how to use it. | ||
| ## NavLink | ||
@@ -20,3 +38,3 @@ `NavLink` is the a React component for navigational links. When the link is clicked, NavLink will dispatch `NAVIGATE` action to flux dispatcher. The dispatcher can then dispatch the action to the stores that can handle it. | ||
| * Using `href` makes your code more readible, as it shows exactly how the `href` is generated. | ||
| * Using `routeName` assumes `this.prop.context` has a `makePath()` function, which will be used to generate the `href` from the `routeName` and `navParams` props. | ||
| * Using `routeName` assumes `this.context` or `this.prop.context` has a `makePath()` function, which will be used to generate the `href` from the `routeName` and `navParams` props. | ||
| * Using `routeName` could be more limited, especially when it comes to query string and hash fragment, if the `makePath()` function does not support query string and hash fragment. | ||
@@ -33,5 +51,7 @@ | ||
| render: function () { | ||
| // This example is using this.props.context for Nav and NavLink components. | ||
| // You can also use the React context, as described in the Context section of this doc. | ||
| var pages, | ||
| links, | ||
| context = this.props.context; // context should provide executeAction() | ||
| context = this.props.context; | ||
| pages = [ | ||
@@ -72,5 +92,4 @@ { | ||
| If you choose not to generate `href` yourself and the `context` prop you pass to `NavLink` provides `makePath(routeName, routeParams)`, you can also use the `routeName` prop (and the optional `navParams` prop). If the `href` prop is not present, `NavLink` will use `this.props.context.makePath(this.props.routeName, this.props.navParams)` to generate the `href` for the anchor element. The `navParams` prop is useful for dynamic routes. It should be a hash object containing the route parameters and their values. | ||
| If you choose not to generate `href` yourself and the `context` prop you pass to `NavLink` provides `makePath(routeName, routeParams)`, you can also use the `routeName` prop (and the optional `navParams` prop). If the `href` prop is not present, `NavLink` will use `makePath(this.props.routeName, this.props.navParams)` from either `this.context` or `this.props.context` to generate the `href` for the anchor element. The `navParams` prop is useful for dynamic routes. It should be a hash object containing the route parameters and their values. | ||
| An example of such context is the `ComponentContext` provided by [fluxible-plugin-routr](https://github.com/yahoo/fluxible-plugin-routr/blob/master/lib/routr-plugin.js#L36), which is a plugin for [fluxible-app](https://github.com/yahoo/fluxible-app). We have a more sophisticated example application, [routing](https://github.com/yahoo/flux-examples/tree/master/routing), showing how everything works together. | ||
@@ -106,3 +125,6 @@ Here is a quick example code showcasing how to use `routeName` prop along with `navParams` prop: | ||
| render: function () { | ||
| var context = this.props.context; // context should provide executeAction() and makePath() | ||
| // context should provide executeAction() and makePath(). | ||
| // This example is using this.props.context for Nav and NavLink components. | ||
| // You can also use the React context, as described in the Context section of this doc. | ||
| var context = this.props.context; | ||
| var links = pages.map(function (page) { | ||
@@ -109,0 +131,0 @@ return ( |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.67%
38261
- Lines of code
- increased by3.75%
525
- Number of lines in readme file
- increased by7.56%
313
No dependency changes