vitullo-spinner v0.1.5

A simple to use loading spinner for React.

Require needed code

var Spinner = require('vitullo-spinner');

Run setup in React component

var Spinner = require('vitullo-spinner');
var Example = React.createClass({
	mixins: [
		Spinner.Mixin
	],
	componentWillMount: function() {
		this.addSpinners(['more', 'than', 'one', 'spinner']);
		// or
		// this.addSpinners('spinner');
	}
});

Render the spinner with children

var Spinner = require('vitullo-spinner');
var Example = React.createClass({
	mixins: [
		Spinner.Mixin
	],
	componentWillMount: function() {
		this.addSpinners(['more', 'than', 'one', 'spinner']);
		// or
		// this.addSpinners('spinner');
	}
	render: function() {
		<Spinner loaded={this.getSpinner('than')}>
			<h1>Content!</h1>
		</Spinner>
	}
});

Start and stop the spinner as needed

var Spinner = require('vitullo-spinner');
var Example = React.createClass({
	mixins: [
		Spinner.Mixin
	],
	componentWillMount: function() {
		this.addSpinners(['more', 'than', 'one', 'spinner']);
		// or
		// this.addSpinners('spinner');
	}
	componentDidMount: function() {
		this.startSpinner('than');

		$.ajax('example.com')
		 	.always(function() { this.stopSpinner('than'); });
  	}
	render: function() {
		<Spinner loaded={this.getSpinner('than')}>
			<h1>Content!</h1>
		</Spinner>
	}
});

Optional Props

	// Set timeout before the spinner shows up, in s.
	// The default is 1s, to prevent the spinner from briefly flashing
	// every time something is loaded.
	spinWait: React.PropTypes.number,
	// Set timeout before the message appears, in s.
	msgWait: React.PropTypes.number,
	// Set what message appears.
	message: React.PropTypes.string,
	// The height of the spinner container. The actually spinner is 1/3rd 
	// as tall to give some padding.
	height: React.PropTypes.number,
	// The length of time between ticks, in ms. By default this is set to 
	// 500, a lower number will tick more frequently (and allow more 
	// granular  spinWait/msgWait) values. A large number will mutate state 
	// less frequently.
	tickLen: React.PropTypes.number
	// By default this is a div with the class 'vs-indicator', but this can 
	// be overridden if you want a more complex indicator than can be made 
	// with a single div.
	spinner: React.PropTypes.node

Mixin Functions

addSpinners(names)

Add one or more spinners to the current component. A string name or an array of string names should be given.
e.g.

  this.addSpinners("network")
  this.addSpinners(["login", "content", "processing"])

getSpinner(name)

Fetch the current state of a spinner, typically only used as the loaded prop. e.g.

  <Spinner loaded={this.getSpinner('than')}>

startSpinner(name)

Change the state of a spinner to false (i.e. not loaded). e.g.

  this.startSpinner("content")

stopSpinner(name)

Change the state of a spinner to true (i.e. done loading). e.g.

  this.stopSpinner("content")