react-redux-saga-router - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

lib/selectors.js

@@ -17,5 +17,12 @@ 'use strict';
 function matchedRoute(state, name) {
-  return state.routing.matchedRoutes.some(function (route) {
-    return route === name;
-  });
+  var strict = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+  if (Array.isArray(name)) {
+    var matches = state.routing.matchedRoutes.filter(function (route) {
+      return name.includes(route);
+    });
+    if (strict) return matches.length === name.length;
+    return !!matches.length;
+  }
+  return state.routing.matchedRoutes.includes(name);
 }
@@ -22,0 +29,0 @@

package.json

 {
   "name": "react-redux-saga-router",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "elegant powerful routing based on the simplicity of storing url as state",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -291,2 +291,39 @@ # react-redux-saga-router
 
+### Common use case: displaying a component when a route is selected
+
+In most applications, there are menus that select components based on the user
+selecting a sub-application.  To display components whose sole display criteria is
+the selection of a route, use a `RouteToggle`
+
+```javascript
+import RouteToggle from 'react-redux-saga-router'
+
+const TodosRoute = RouteToggle('todos')
+```
+
+In this way, you can display several components scattered around a layout template
+that are route-specific without having to make a new layout template just for that route,
+or doing any strange contortions.
+
+A `RouteToggle` accepts all the arguments of Toggle afterwards:
+
+```javascript
+import RouteToggle from 'react-redux-saga-router'
+
+const TodosRoute = RouteToggle('todos', state => state.whatever === 'hi')
+```
+
+The example above will only toggle if the todos route is active and the `whatever`
+portion of state is equal to 'hi'
+
+A `RouteToggle` can be thought of
+as a simpler version of this source code:
+
+```javascript
+import Toggle from 'react-redux-saga-router/Toggle'
+import { matchedRoutes } from 'react-redux-saga-router/selectors'
+
+const TodosRoute = Toggle(state => matchedRoutes(state, 'todos'))
+```
+
 ### Available selectors for Toggles
@@ -309,2 +346,23 @@
 
+`matchedRoute` accepts a single route name, or an array of route names to match.
+By default, it matches on any route.  To enable strict matching (all routes must match)
+pass in true to the third parameter of matchedRoute
+
+```javascript
+import * as selectors from 'react-redux-saga-router/selectors'
+import Toggle from 'react-redux-saga-router/Toggle'
+
+export Toggle(state => selectors.matchedRoute(state, ['route', 'subroute'], true))
+```
+
+This is useful for strict matching of a sub-route path.
+
+Note that a convenience Toggle, `RouteToggle` exists to match a route:
+
+```javascript
+import RouteToggle from 'react-redux-saga-router/RouteToggle'
+
+export RouteToggle('routename', state => otherconditions())
+```
+
 This selector returns true if the route specified by `'routename'` is active
@@ -412,5 +470,6 @@
 import Toggle from 'react-redux-saga-router/Toggle'
+import RouteToggle from 'react-redux-saga-router/RouteToggle'
 
-const AboutToggle = Toggle(state => selectors.matchedRoute('about'))
-const UsersToggle = Toggle(state => selectors.matchedRoute('users') || Toggle(state => selectors.matchedRoute('user')))
+const AboutToggle = RouteToggle('about')
+const UsersToggle = RouteToggle(['users', 'user'])
 const SelectedUserToggle = Toggle(state => !!state.users.selectedUser,
@@ -417,0 +476,0 @@ state => usersLoaded(state) && state.users.user[state.users.selectedUser])

src/selectors.js

@@ -1,3 +0,8 @@
-export function matchedRoute(state, name) {
-  return state.routing.matchedRoutes.some(route => route === name)
+export function matchedRoute(state, name, strict = false) {
+  if (Array.isArray(name)) {
+    const matches = state.routing.matchedRoutes.filter(route => name.includes(route))
+    if (strict) return matches.length === name.length
+    return !!matches.length
+  }
+  return state.routing.matchedRoutes.includes(name)
 }
@@ -4,0 +9,0 @@

No alert changes

Improved metrics

Total package byte prevSize

112489

increased by3.72%

Number of package files

39

increased by8.33%

Lines of code

2006

increased by2.03%

Number of lines in readme file

854

increased by7.42%

No dependency changes