react-loader

react-loader provides your React.js component a simple mechanism for rendering a loading spinner (via spin.js) while data is loading, such as an asynchronous request to load data for a view.

Installation

react-loader is available through both Bower and npm via:

npm install react-loader

or:

bower install react-loader

Be sure to include the --save option to add this as a dependency in your application's package.json or bower.json file.

Usage

Wrap the Loader component around your loading content within your React component's render function.

/** @jsx React.DOM */
var ReactLoader = require('react-loader');
var MyComponent = React.createClass({
getInitialState: function () {
return { loaded: false, profile: null };
},
componentDidMount: function () {
new Profile({ id: this.props.id }).fetch({
success: this.onSuccess,
error: this.onError
})
},
onSuccess: function (profile) {
this.setState({ profile: profile, loaded: true });
},
onError: function (err) {
// error handling goes here
},
render: function () {
return (
<Container>
<Header>My Profile</Header>
<Loader loaded={this.state.loaded}>
<Profile model={this.state.profile} />
</Loader>
</Container>
);
}
});

Options

Options can be passed to the Loader component as properties. The Loader accepts a loaded boolean that specified whether the spinner or content should be displayed, defaulting to false. Additionally, all options available to spin.js are available to this component.

<Loader loaded={false} lines={13} length={20} width={10} radius={30}
corners={1} rotate={0} direction={1} color="#000" speed={1}
trail={60} shadow={false} hwaccel={false} className="spinner"
zIndex={2e9} top="50%" left="50%" />

Styling

The loader is rendered inside a DIV element with class "loader". A simple solution for rendering the spinner on the center of your screen would be to use some CSS like the following:

.loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
z-index: 9999;
}

Contributing

To contribute:

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Add your changes to the lib/react-loader.js file along with associated tests under test/spec/react-loader-test.js.
4. Build any JSX changes to JS (npm run build), and run tests (npm test).
5. Commit your changes (git commit -am 'Added some feature')
6. Push to the branch (git push origin my-new-feature)
7. Create new Pull Request

License

react-loader is released under the MIT License.