move the options to the joyride object, cleaning up the component c…

…lutter

README.md

@@ -47,7 +47,9 @@ Or include this directly in your html:
 Add steps to your tour after your component is mounted.
 
 ```javascript
-this.joyrideAddSteps([{...}])]
+	componentDidMount: function () {
+		this.joyrideAddSteps([{...}])]
+	}
 ```
 
 Start the tour with:
@@ -56,59 +58,63 @@ Start the tour with:
 this.joyrideStart()
 ```
 
-## Options
+## API
+
+### this.joyrideSetOptions(options)
+
+Change the initial options during `componentWillMount`. All optional
 
-**joyrideKeyboardNavigation** {bool}: Toggle keyboard navigation (esc, space bar, return). Defaults to `true`
+- `options` {object} - One or more of the options below.
 
-**joyrideLocale** {object}: The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', skip: 'Skip' }`
+**keyboardNavigation** {bool}: Toggle keyboard navigation (esc, space bar, return). Defaults to `true`
 
-**joyrideScrollOffset** {number}: The scrollTop offset used in `joyrideScrollToSteps`. Defaults to `20`
+**locale** {object}: The strings used in the tooltip. Defaults to `{ back: 'Back', close: 'Close', last: 'Last', next: 'Next', skip: 'Skip' }`
 
-**joyrideScrollToSteps** {bool}: Scroll the page to the next step if needed. Defaults to `true`
+**scrollOffset** {number}: The scrollTop offset used in `scrollToSteps`. Defaults to `20`
 
-**joyrideShowBackButton** {bool}: Display a back button. Defaults to `true`
+**scrollToSteps** {bool}: Scroll the page to the next step if needed. Defaults to `true`
 
-**joyrideShowOverlay** {bool}: Display an overlay with holes above your steps. Defaults to `true`
+**showBackButton** {bool}: Display a back button. Defaults to `true`
 
-**joyrideShowSkipButton** {bool}: Display a link to skip the tour. It will trigger the `joyrideCompleteCallback` if it was defined. Defaults to `false`
+**showOverlay** {bool}: Display an overlay with holes above your steps. Defaults to `true`
 
-**joyrideShowStepsProgress** {bool}: Display the tour progress in the next button *e.g. 2/5*  in `guided` tours. Defaults to `false`
+**showSkipButton** {bool}: Display a link to skip the tour. It will trigger the `completeCallback` if it was defined. Defaults to `false`
 
-**joyrideTooltipOffset** {number}: The tooltip offset from the target. Defaults to `30`
+**showStepsProgress** {bool}: Display the tour progress in the next button *e.g. 2/5*  in `guided` tours. Defaults to `false`
 
-**joyrideType** {string}: The type of your presentation. It can be `guided` (played sequencially with the Next button) or `single`. Defaults to `guided`
+**tooltipOffset** {number}: The tooltip offset from the target. Defaults to `30`
 
-**joyrideCompleteCallback** {function}: It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to `undefined`
+**type** {string}: The type of your presentation. It can be `guided` (played sequencially with the Next button) or `single`. Defaults to `guided`
 
-**joyrideStepCallback** {function}: It will be called after each step and passes the completed step. Defaults to `undefined`
+**completeCallback** {function}: It will be called after an user has completed all the steps in your tour and passes all steps. Defaults to `undefined`
 
-You can change these in `componentWillMount`. All optional.
+**stepCallback** {function}: It will be called after each step and passes the completed step. Defaults to `undefined`
 
 Example:
 
 ```javascript
 componentWillMount: function () {
-	this.setState({
-		joyrideLocale: {
+	this.joyrideSetOptions({
+		locale: {
 			back: 'Voltar',
 			close: 'Fechar',
 			last: 'Último',
 			next: 'Próximo',
 			skip: 'Pular'
 		},
-		joyrideStepCallback: function(step) {
+		showSkipButton: true,
+		tooltipOffset: 10,
+		...
+		stepCallback: function(step) {
 			console.log(step);
 		},
-		joyrideCompleteCallback: function(steps) {
+		completeCallback: function(steps) {
 			console.log(steps);
 		}
-		...
 	});
 }
 ```
 
-## API
-
 ### this.joyrideAddSteps(steps, [start])
 
 Add steps to your tour. You can call this method multiple times even after the tour has started.