Add custom render

README.md

@@ -64,6 +64,8 @@ NOTE: The above configs must load BEFORE your AccountsTemplates routes are defin
 
 ## React Configuration
 
+If you want to include React as a NPM package please take a look at [Custom Configuration](#custom-configuration).  
+
 Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages. User Accounts currents only renders Blaze templates. In order to use User Accounts with React we rely on the [Blaze To React][4] package to render the User Accounts templates.
 
 Before you configure routes for User Accounts with Flow Router, you will need to make sure you have set a few default configuration items.  
@@ -109,7 +111,7 @@ If you don't have extra content regions (nav, footer, etc) you should pass an em
 
 ```js
 AccountsTemplates.configure({
-	defaultLayoutType: 'blaze-to-react',
+  defaultLayoutType: 'blaze-to-react',
   defaultTemplate: 'myCustomFullPageAtForm',
   defaultLayout: MainLayout,
   defaultLayoutRegions: {},
@@ -123,6 +125,58 @@ Please note that this template must be a **Blaze** template. It will be rendered
 
 NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).
 
+## Custom Configuration
+
+You can set `defaultLayoutType` or `layoutType` to use a custom render function which is defined with `defaultCustomRender` or `customRender`. 
+
+Assuming you have a React main layout and a sign up page: 
+
+```jsx
+MainLayout = React.createClass({
+  render() {
+    return (
+      <div>
+        <main>
+          {this.props.main}
+        </main>
+      </div>
+    );
+  }
+});
+
+SignUp = React.createClass({
+  render() {
+    return (
+      <div>
+        Sign up ...
+      </div>
+    );
+  }
+});
+```
+
+You want to use the NPM [react-mounter](https://github.com/kadirahq/react-mounter) package to mount this page. 
+
+```jsx
+import { mount } from 'react-mounter';
+
+AccountsTemplates.configure({
+  defaultLayoutType: 'custom',
+  defaultCustomRender: (layoutTemplate, layoutRegions) => {
+    mount(layoutTemplate, layoutRegions);
+  },
+  defaultLayout: MainLayout,
+  defaultLayoutRegions: {},
+  defaultContentRegion: 'main'
+});
+
+AccountsTemplates.configureRoute('signUp', {
+	name: 'signUp',
+	path: '/sign-up',
+	template: <SignUp />
+});
+```
+
 ## Routes
 
 There are no routes provided by default, but you can easily configure routes for sign in, sign up, forgot password, reset password, change password, enroll account using `AccountsTemplates.configureRoute`.  

lib/core.js

@@ -14,8 +14,9 @@
 // Add new configuration options
 _.extend(AccountsTemplates.CONFIG_PAT, {
   defaultLayoutType: Match.Optional(String),
+  defaultCustomRender: Match.Optional(Match.Where(_.isFunction)),
   defaultLayout: Match.Optional(Match.OneOf(String, Match.Where(_.isFunction))),
-  defaultTemplate: Match.Optional(String),
+  defaultTemplate: Match.Optional(Match.OneOf(String, Object)),
   defaultLayoutRegions: Match.Optional(Object),
   defaultContentRegion: Match.Optional(String),
   renderLayout: Match.Optional(Object),
@@ -26,7 +27,8 @@ _.extend(AccountsTemplates.CONFIG_PAT, {
 var ROUTE_PAT = {
   name: Match.Optional(String),
   path: Match.Optional(String),
-  template: Match.Optional(String),
+  customRender: Match.Optional(Match.Where(_.isFunction)),
+  template: Match.Optional(Match.OneOf(String, Object)),
   layoutTemplate: Match.Optional(String),
   renderLayout: Match.Optional(Object),
   contentRange: Match.Optional(String),
@@ -139,8 +141,9 @@ AccountsTemplates.configureRoute = function(route, options) {
 
   // Use BlazeLayout by default
   var defaultLayoutType = AccountsTemplates.options.defaultLayoutType || 'blaze';
+  var customRender = options.customRender || AccountsTemplates.options.defaultCustomRender;
   // fullPageAtForm template unless user specified a different site-wide default
-  var defaultTemplate = AccountsTemplates.options.defaultTemplate || "fullPageAtForm";
+  var defaultTemplate = AccountsTemplates.options.defaultTemplate || "fullPageAtForm";  
   // Determines the default layout to be used in case no specific one is
   // specified for single routes
   var defaultLayout = AccountsTemplates.options.defaultLayout;
@@ -167,9 +170,15 @@ AccountsTemplates.configureRoute = function(route, options) {
 
     // Strings are assumed to be Blaze template names
     layoutRegions[contentRegion] = template;
-  }
+  } else if (layoutType === "custom") {
+
+    // Ensure that we have the customRender function
 
-  if (layoutType === "blaze-to-react") {
+    if (!customRender) {
+      throw new Error("layoutTemplate is custom but customRender is not found.");
+    }
+    layoutRegions[contentRegion] = template;
+  } else if (layoutType === "blaze-to-react") {
 
     // Ensure that we have the required packages to render Blaze templates
     //
@@ -178,7 +187,7 @@ AccountsTemplates.configureRoute = function(route, options) {
     if (Package['react-runtime']) {
       var React = Package['react-runtime'].React;
     } else {
-      throw new Error("layoutTemplate is a React element but React runtime package is not found");
+      throw new Error("layoutTemplate is a React element but React runtime package is not found.");
     }
 
     if (Package['kadira:react-layout']) {
@@ -203,6 +212,9 @@ AccountsTemplates.configureRoute = function(route, options) {
       // We need to render using ReactLayout and BlazeToReact
 
       ReactLayout.render(layoutTemplate, layoutRegions);
+    } else if (layoutType === "custom") {
+      // Render using custom function
+      customRender(layoutTemplate, layoutRegions);
     } else {
       // Render using BlazeLayout
       BlazeLayout.render(layoutTemplate, layoutRegions);