# react-loader
> React component that displays a spinner via spin.js until your component is loaded
Latest version **2.4.7** (published 2020-02-03) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-loader
pnpm add react-loader
yarn add react-loader
bun add react-loader
```
## Health
**Score 23/100 (F)** — status: abandoned.
Positive: has types package; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.4.7 |
| Published | 2020-02-03 |
| First published | 2014-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-loader) |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 45.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Matt Huggins |
| Maintainers | quickleft |
| Keywords | react, component, react-component, loader, spinner, spin, spinjs, spin.js |
## Links
- npm: https://www.npmjs.com/package/react-loader
- Repository: https://github.com/quickleft/react-loader
- Issues: https://github.com/quickleft/react-loader/issues
- npm.io page: https://npm.io/package/react-loader
## Dependencies (3)
- [spin.js](https://npm.io/package/spin.js.md) 2.x
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.5.2
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.4.7 (latest) — 2020-02-03
- 2.4.6 — 2019-11-25
- 2.4.5 — 2018-04-20
- 2.4.4 — 2018-04-18
- 2.4.3 — 2018-02-22
- 2.4.2 — 2017-05-18
- 2.4.1 — 2017-05-16
- 2.4.0 — 2016-04-12
- 2.3.0 — 2016-04-12
- 2.2.0 — 2016-03-11
- 2.1.0 — 2016-03-09
- 2.0.0 — 2015-10-12
- 1.4.0 — 2015-06-05
- 1.2.0 — 2015-03-03
- 1.1.0 — 2015-01-12
- … 2 more at https://npm.io/package/react-loader/versions
## README
# react-loader [](https://circleci.com/gh/CognizantStudio/react-loader)
react-loader provides your [React.js](http://facebook.github.io/react/)
component a simple mechanism for rendering a loading spinner (via
[spin.js](http://fgnass.github.io/spin.js/)) while data is loading, such as an
asynchronous request to load data for a view.
> Important Note: The 2.x tagged release is compatible with React 1.4 and higher. If
> you're working with an older version of React, please use the 1.x release.
## Installation
react-loader is available through both [Bower](http://bower.io/) and
[npm](https://www.npmjs.org/) 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
/** @jsx React.DOM */
var Loader = 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 (
);
}
});
```
### 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`. It also accepts a `component` property to
specify the DOM node, defaulting to `"div"`. Additionally, all options
available to spin.js are available to this component in two ways.
1. First, you can pass each option onto the loader as individual properties:
```jsx
```
2. Alternatively, you can use supply an object using the `options` key:
```jsx
var options = {
lines: 13,
length: 20,
width: 10,
radius: 30,
scale: 1.00,
corners: 1,
color: '#000',
opacity: 0.25,
rotate: 0,
direction: 1,
speed: 1,
trail: 60,
fps: 20,
zIndex: 2e9,
top: '50%',
left: '50%',
shadow: false,
hwaccel: false,
position: 'absolute'
};
```
### Styling
The loader is rendered inside a DIV element (unless otherwise specified via the
`component` property mentioned earlier) 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:
```css
.loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: white;
z-index: 9999;
}
```
Once the content is loaded and the spinner is removed, the DOM node is given a
class of "loadedContent" (which is customizable by specifying the
`loadedClassName` property).
### Demo
To view the demo open demo/index.html in any browser.
## [Examples](/examples/README.md)
## 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.jsx` 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](http://opensource.org/licenses/MIT).
---
_Source: https://npm.io/package/react-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._