Skip to content

Commit 1701c41

Browse files
committed
Merge pull request #22 from meteor-useraccounts/react-usage
clarify React usage in README
2 parents 8ef8bea + 34af472 commit 1701c41

File tree

1 file changed

+70
-48
lines changed

1 file changed

+70
-48
lines changed

README.md

+70-48
Original file line numberDiff line numberDiff line change
@@ -58,81 +58,78 @@ AccountsTemplates.configure({
5858
});
5959
```
6060

61-
Useraccounts:flow-routing uses the internal useraccounts
62-
63-
```fullPageAtForm``` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence). Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
61+
`useraccounts:flow-routing` uses the internal useraccounts `fullPageAtForm` is the built-in template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with `defaultTemplate:` field as above (templates specified in route config will still take precedence). Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
6462

6563
NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).
6664

6765
## React Configuration
6866

69-
Firstly, please ensure that your app depends upon the [React Layout][3] and the [Blaze Layout][2] packages.
70-
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.
67+
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.
7168

7269
Before you configure routes for User Accounts with Flow Router, you will need to make sure you have set a few default configuration items.
7370

74-
Assuming you have a main layout that looks like this:
71+
Assuming you have a main layout that looks like following and you have `<Nav />` and `<Footer />` as your default nav/footer components:
7572

7673
```jsx
7774
MainLayout = React.createClass({
7875
render() {
79-
return <div>
80-
<header>
81-
{this.props.header}
82-
</header>
83-
<main>
84-
{this.props.main}
85-
</main>
86-
<footer>
87-
{this.props.footer}
88-
</footer>
89-
</div>
76+
return (
77+
<div>
78+
<header>
79+
{this.props.nav || <Nav />}
80+
</header>
81+
<main>
82+
{this.props.main}
83+
</main>
84+
<footer>
85+
{this.props.footer || <Footer />}
86+
</footer>
87+
</div>
88+
);
9089
}
9190
});
9291
```
9392

94-
You would configure this package to use it like this:
93+
You would then configure this package to use it like this:
9594

9695
```js
9796
AccountsTemplates.configure({
98-
defaultLayoutType: 'blaze-to-react',
99-
defaultTemplate: 'myCustomFullPageAtForm',
100-
defaultLayout: MainLayout,
101-
defaultLayoutRegions: {
102-
header: <MyNav />,
103-
footer: <MyFooter />
104-
},
105-
defaultContentRegion: 'main'
97+
defaultLayoutType: 'blaze-to-react',
98+
defaultTemplate: 'fullPageAtForm', // default
99+
defaultLayout: MainLayout,
100+
defaultLayoutRegions: {
101+
nav: <Nav />,
102+
footer: <Footer />
103+
},
104+
defaultContentRegion: 'main'
106105
});
107106
```
108107

109-
If you don't have extra content regions (nav, footer, etc) you should pass an empty object to ```defaultLayoutRegions``` key of the config.
108+
If you don't have extra content regions (nav, footer, etc) you should pass an empty object to the `defaultLayoutRegions` key of the config.
110109

111110
```js
112111
AccountsTemplates.configure({
113112
defaultLayoutType: 'blaze-to-react',
114-
defaultTemplate: 'myCustomFullPageAtForm',
115-
defaultLayout: MainLayout,
116-
defaultLayoutRegions: {},
117-
defaultContentRegion: 'main'
113+
defaultTemplate: 'myCustomFullPageAtForm',
114+
defaultLayout: MainLayout,
115+
defaultLayoutRegions: {},
116+
defaultContentRegion: 'main'
118117
});
119118
```
120-
Useraccounts:flow-routing uses the internal useraccounts
121119

122-
```fullPageAtForm``` is the built-in **Blaze** template useraccounts uses by default for its forms. You can override it on a per-route basis (see below) or replace it with ```defaultTemplate:``` field as above (templates specified in route config will still take precedence). Omit ```defaultTemplate``` (or set to an empty string) to use the ```fullPageAtForm``` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
120+
`useraccounts:flow-routing` uses `fullPageAtForm` for the `defaultTemplate` option. `fullPageAtForm` is the built-in Blaze template that all UserAccounts themed packages (Bootstrap, Materialize, etc.) use for their forms. You can override it on a per-route basis (see below) or replace it as shown above (templates specified in a route config will still take precedence). Omit `defaultTemplate` (or set to an empty string) to use the `fullPageAtForm` template built-in to your useraccounts UI package (ex [material](https://github.com/meteor-useraccounts/materialize/blob/master/lib/full_page_at_form.html)).
123121

124122
Please note that this template must be a **Blaze** template. It will be rendered into your React layout using [Blaze To React][4].
125123

126124
NOTE: The above configs must load BEFORE your AccountsTemplates routes are defined (next section).
127125

128-
129126
## Routes
130127

131128
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`.
132129

133130
The simplest way is to make the call passing in only a route code (available route codes are: signIn, signUp, changePwd, forgotPwd, resetPwd, enrollAccount).
134131

135-
This will set up the sign in route with a full-page form:
132+
This will set up the sign in route with a full-page form at `/sign-in`:
136133

137134
```js
138135
AccountsTemplates.configureRoute('signIn');
@@ -146,24 +143,47 @@ AccountsTemplates.configureRoute(route_code, options);
146143

147144
The following is a complete example of a custom route configuration:
148145

146+
##### Blaze
147+
149148
```js
149+
// routes.js
150+
150151
AccountsTemplates.configureRoute('signIn', {
151-
layoutType: 'blaze',
152-
name: 'signin',
153-
path: '/login',
154-
template: 'myLogin',
155-
layoutTemplate: 'myLayout',
156-
layoutRegions: {
157-
nav: 'myNav',
158-
footer: 'myFooter'
159-
},
160-
contentRegion: 'main'
152+
layoutType: 'blaze',
153+
name: 'signin',
154+
path: '/login',
155+
template: 'myLogin',
156+
layoutTemplate: 'myLayout',
157+
layoutRegions: {
158+
nav: 'customNav',
159+
footer: 'customFooter'
160+
},
161+
contentRegion: 'main'
162+
});
163+
```
164+
165+
##### React
166+
167+
```jsx
168+
// routes.jsx
169+
170+
AccountsTemplates.configureRoute('signIn', {
171+
layoutType: 'blaze-to-react',
172+
name: 'signin',
173+
path: '/login',
174+
template: 'myLogin',
175+
layoutTemplate: CustomLayout,
176+
layoutRegions: {
177+
nav: <CustomNav />,
178+
footer: <CustomFooter />
179+
},
180+
contentRegion: 'main'
161181
});
162182
```
163183

164184
All options are passed to FlowRouter.route() which then creates a new custom route (see the official Flow Router documentation [here](https://atmospherejs.com/kadira/flow-router) for more details).
165185

166-
All the above fields are optional and fall back to default values in case you don't provide them. Default values are as follows:
186+
Default values for all fields are as follows:
167187

168188
| Action | route_code | Route Name | Route Path | Template | Redirect after Timeout |
169189
| --------------- | ------------- | --------------- | --------------- | -------------- |:----------------------:|
@@ -184,7 +204,9 @@ If you want to protect a route by making sure a user is signed in, you can add t
184204
FlowRouter.route('/private', {
185205
triggersEnter: [AccountsTemplates.ensureSignedIn],
186206
action: function() {
187-
BlazeLayout.render(...)
207+
BlazeLayout.render(...);
208+
// or
209+
ReactLayout.render(...);
188210
}
189211
});
190212
```
@@ -200,4 +222,4 @@ FlowRouter.triggers.enter([AccountsTemplates.ensureSignedIn]);
200222
[1]: https://atmospherejs.com/kadira/flow-router
201223
[2]: https://atmospherejs.com/kadira/blaze-layout
202224
[3]: https://atmospherejs.com/kadira/react-layout
203-
[4]: https://atmospherejs.com/gwendall/blaze-to-react
225+
[4]: https://atmospherejs.com/gwendall/blaze-to-react

0 commit comments

Comments
 (0)