Merge pull request #8 from whatknight/renderCtrl

Add new prop for finer control of rendering.

docs/Switcher.md

@@ -55,6 +55,16 @@ By default `window.location.hash` is used to match paths. If `location` is set t
 onChange(match, pathname, dynamicSegments) { ... }
 ```
 
+### renderSwitch
+A function that receives the selected element as well as the dynamic values to render. If this prop is passed, the wrapper prop will not be used.
+
+```js
+renderSwitch(selectedElement, dynamicData) { 
+  return (<div>{selectedElement}</div>) //the rendered output of the Switcher
+}
+```
+
+
 ### wrapper
 
 If the `wrapper` prop is defined, the rendered child component will be wrapped in the specified React component. Any additional props passed to the `Switcher` will also be properties of this wrapper component.

src/index.js

@@ -21,7 +21,8 @@ export default class Switcher extends Component {
     location: PropTypes.string,
     basePath: PropTypes.string,
     preventUpdate: PropTypes.func,
-    mapDynamicSegments: PropTypes.func
+    mapDynamicSegments: PropTypes.func,
+    renderSwitch: PropTypes.func
   };
 
   static defaultProps = {
@@ -101,6 +102,10 @@ export default class Switcher extends Component {
       {...props, ...this.props.mapDynamicSegments(this.state.dynamicValues)}
     );
 
+    if(this.props.renderSwitch) {
+      return this.props.renderSwitch(visibleSwitch, this.state.dynamicValues);
+    }
+
     if (this.props.wrapper) {
       return React.createElement(
         this.props.wrapper,

test/Switcher_test.js

@@ -282,6 +282,45 @@ describe('Switcher', function() {
       });
     });
 
+    describe('with custom render', function() {
+      it('calls the custom render function with the component and values', function() {
+        sinon.stub(helpers, 'currentPath').returns('/user/234-cde/information/421');
+        function mapper({id, page}) {
+          var matches = id.match(/(.+)-(.+)/);
+          return {
+            userNum: matches[1],
+            userLetters: matches[2],
+            page: parseInt(page, 10) * 2
+          };
+        }
+        function MyComp(props) {
+          return (
+            <span>{props.userNum + props.userLetters + props.page}</span>
+          );
+        }
+        MyComp.displayName = 'MyComp';
+        MyComp.propTypes = {
+          userNum: PropTypes.string,
+          userLetters: PropTypes.string,
+          page: PropTypes.number
+        };
+        const render = sinon.stub().returnsArg(0);
+        ReactDOM.render(
+          <Switcher renderSwitch={render} mapDynamicSegments={mapper}>
+            <MyComp path="/user/:id/information/:page" />
+            <div path="/user/id/information/page">Static Path</div>
+          </Switcher>,
+          document.getElementById('app')
+        );
+        sinon.assert.calledOnce(render);
+        assert.deepEqual(render.args[0][1], {id: '234-cde', page: '421'});
+      });
+      afterEach(function() {
+        ReactDOM.unmountComponentAtNode(document.getElementById('app'));
+        helpers.currentPath.restore();
+      });
+    });
+
     describe('with a wrapper', function() {
       beforeEach(function() {
         function mapper({id, page}) {