react-loader - React component that displays a spinner via spin.js until your component is loaded.

Related tags

react-loader
Overview

react-loader CircleCI

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.

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 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 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 (
      <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. 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:
<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%" scale={1.00}
    loadedClassName="loadedContent" />
  1. Alternatively, you can use supply an object using the options key:
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'
};

<Loader loaded={false} options={options} className="spinner" />

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:

.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.

spinner demo

Examples

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.

Issues
  • Passing options as an object instead of prop by prop

    Passing options as an object instead of prop by prop

    Simple change on how you're passing props to be used to spin.js.

    Just ran into issues while using the same options across an app with flu.x, this way you can just store the whole object key and reuse it whenever a component needs to make use of it.

    Cheers!

    opened by tmayr 18
  • Cannot read property 'string' of undefined in latest release 2.4.1

    Cannot read property 'string' of undefined in latest release 2.4.1

    Hi there, we use react-loader on production and had it set to ^2.4.0 in our package.json. The latest release 2.4.1 is breaking on Travis with the following error:

    Test suite failed to run TypeError: Cannot read property 'string' of undefined

      at node_modules/react-loader/lib/react-loader.js:15:33
      at Object.<anonymous>.createReactClass.propTypes.className (node_modules/react-loader/lib/react-loader.js:6:22)
      at Object.<anonymous> (node_modules/react-loader/lib/react-loader.js:11:2)
    

    Fixing it manually at 2.4.0 resolves this issue but thought you should know that the patch is breaking things.

    opened by alengel 14
  • Added compatibility with React 0.14

    Added compatibility with React 0.14

    In React 0.14, refs to a DOM node will return the node itself. Calling getDOMNode() on it works, but throws a loud warning. See the announcement blog post

    opened by dallonf 11
  • Accept all minor versions of React 16

    Accept all minor versions of React 16

    Accept React versions for 16.X.X, not only 16.0.X

    Documentation reference: https://docs.npmjs.com/getting-started/semantic-versioning

    opened by hector 10
  • Issue using with Webpack

    Issue using with Webpack

    Hey there, I seem to be getting an issue related to webpack and React-loader.

    ReferenceError: document is not defined
        at createEl (/Users/mike/Projects/bitwatcher/dist/server.js:94672:15)
        at /Users/mike/Projects/bitwatcher/dist/server.js:94693:15
        at /Users/mike/Projects/bitwatcher/dist/server.js:94696:5
        at prefixes (/Users/mike/Projects/bitwatcher/dist/server.js:94652:32)
        at Object.<anonymous> (/Users/mike/Projects/bitwatcher/dist/server.js:94660:2)
        at __webpack_require__ (/Users/mike/Projects/bitwatcher/dist/server.js:20:30)
        at React.createClass.displayName (/Users/mike/Projects/bitwatcher/dist/server.js:94535:64)
        at Object.<anonymous> (/Users/mike/Projects/bitwatcher/dist/server.js:94542:3)
        at __webpack_require__ (/Users/mike/Projects/bitwatcher/dist/server.js:20:30)
        at Object.<anonymous> (/Users/mike/Projects/bitwatcher/dist/server.js:5242:31)
    Program node dist/server exited with code 1
    
    opened by michaelryancaputo 10
  • update package.json

    update package.json

    all working fine in react 16

    opened by Ross146 8
  • Cannot find module

    Cannot find module "spin"

    I tried npm install and downloading directly the library but in both cases it throws an error saying the "spin" library does is not found.

    opened by sam3k 7
  • Invariant Violation error

    Invariant Violation error

    Getting a react error trying to use this component: Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component'srendermethod). Try rendering this component inside of a new top-level component which will hold the ref.

    Same issue as reported here: See https://stackoverflow.com/questions/31327249/reactjs-invariant-violation-with-npm-module-react-loader#

    opened by lukestephenson 6
  • Support `scale` property

    Support `scale` property

    Didn't add a test for this as there are no other tests for specific properties. I did, however, run the tests to confirm there were no regressions.

      Loader
        loading is in progress
          ✓ renders the correct output
        loading is in progress with component option
          ✓ renders the correct output
        loading is in progress with spinner options
          ✓ renders the correct output
        loading is in progress with spinner options and options object is used instead of props
          ✓ renders the correct output
        loading is complete
          ✓ renders the correct output
        loading is complete with component option
          ✓ renders the correct output
    
    
      6 passing (18ms)
    
    opened by pthrasher 6
  • React 17+ peer dependency?

    React 17+ peer dependency?

    Hi there, on a project that uses react-loader 2.4.7, I'm getting a peer dependency warning:

    warning " > [email protected]" has incorrect peer dependency "[email protected]^0.14.0 || ^15.0.0 || ^16.0.0".
    

    That must be because of the peerDependencies specified in this project's package.json.

    Could this be as simple as appending a || ^17.0.0" to that line of code? One reason to think so is that React 17 essentially adds no new features.

    Thanks for any input!

    opened by jayqui 0
  • Update package.json

    Update package.json

    Support to react 17.*

    What does this PR do?

    Where should the reviewer start?

    How should this be manually tested?

    Any background context you want to provide?

    What are the relevant issues (if any)?

    Screenshots (if appropriate)

    Obligatory GIF

    opened by manprajapat 1
  • material-survey Failed to compile

    material-survey Failed to compile

    ./node_modules/material-survey/components/Survey/index.js Module parse failed: Unexpected token (143:16) You may need an appropriate loader to handle this file type. | } | }, _react2.default.createElement(_SurveyQuestion2.default, { | question: { ...q, | defaultAnswer: defaultAnswers[q.name] | },

    opened by kinkievan 0
  • Examples are not working

    Examples are not working

    If you open the create-react-app example or the simple html it shows the spinner but it does not work properly. I guess it is something with the timeout

    opened by Sabrinovsky 0
  • How to display a text ' Loading .....'

    How to display a text ' Loading .....'

    HI, I am using react-loader. Thanks, it is a cool component and integrated into the existing code with much effort. We have a need to display test along with the spinner. Please let me know how to achieve this. Thanks. Reshma

    opened by ReactRS 0
  • Upgrade to latest spin.js?

    Upgrade to latest spin.js?

    Any chance?

    opened by jmullo 1
  • React.createClass deprecation warning

    React.createClass deprecation warning

    Are there plans to update the component creation to fall in line with React 15.x+ so the createClass warning is taken care of?

    opened by bj7 0
  • Shouldn't 'getInitialState()' set loaded to 'this.props.loaded' instead of 'false'?

    Shouldn't 'getInitialState()' set loaded to 'this.props.loaded' instead of 'false'?

    Loaded is currently being initialized to false when the component is initialized. This might be an issue as updating a component state is asynchronous and the first time the component is rendered it will be set to 'loading' (even if a I set loaded=true) for a brief moment.

    I have a test suite which is inconsistently failing due to this issue. When I manually change the getInitialState() as follows:

        getInitialState: function () {
          return { loaded: this.props.loaded, options: {} };
        },
    

    then it passes.

    opened by diegocasmo 1
  • play well with server rendering

    play well with server rendering

    in before code, call renderToString in server side after data loaded will only get "<div class="loader" />" without children

    opened by sofsirwj 1
  • Why are children components unmounted?

    Why are children components unmounted?

    Why does the loader unmount and remount children components?

    opened by benpolinsky 2
Releases(2.4.7)
Owner
Cognizant Studio
Cognizant Studio
A collection of loading indicators animated with CSS for React

react-spinkit A collection of loading indicators animated with CSS for React Currently I've ported all the spinner animations from Spinkit. If you hav

Kyle Mathews 1.4k Oct 2, 2021
Amazing collection of React spinners components with pure css

React Spinners CSS Loaders (Vue, Angular) Amazing collection of React spinners components with pure css. The React spinners are based on loading.io an

Josh Kuttler 274 Sep 24, 2021
A collection of loading spinner components for react

React Spinners A collection of loading spinners with React.js based on Halogen. This package is bootstraped using react-npm-boilerplate Demo Demo Page

David Hu 2k Oct 12, 2021
Loading Bar (aka Progress Bar) for Redux and React

React Redux Loading Bar A React component that provides Loading Bar (aka Progress Bar) for long running tasks. Consists of: React component — displays

Anton Mironov 914 Sep 20, 2021
:cyclone: Simple react.js component for an inline progress indicator

react-progress-button Simple React component for a circular Progress Button. Demo Install npm install react-progress-button --save Example Controlled

Mathieu Dutour 517 Sep 11, 2021
Progress component for React and React Native

react-progress-label Progress component for React and React Native Installation yarn add react-progress-label npm install react-progress-label --save

SWIFT CARROT Technologies 95 May 16, 2021
Easy way to block the user from interacting with your UI.

react-block-ui Easy way to block the user from interacting with your UI. About This library contains easy to use components to prevent the user from i

Availity 271 Sep 13, 2021
3D animated react button component with progress bar.

3D animated react button component with progress bar.

MD. Ariful Alam 68 Oct 5, 2021
Creates a download handler function and gives progress information

Creates a download handler function and gives progress information

Olavo Parno 57 Sep 15, 2021
Make beautiful, animated loading skeletons that automatically adapt to your app.

react-loading-skeleton Make beautiful, animated loading skeletons that automatically adapt to your app. Basic usage Install by npm/yarn with react-loa

David Tang 2.4k Oct 13, 2021
❄️ The ultimate Line Progress Bar UI for React - Supports 🌸 Natural color gradients & ☃️ Coherent border rounding

Frogress ❄️ The ultimate Line Progress Bar UI for React @frogress/line ?? Installation # Install peer depedencies yarn add react react-dom styled-comp

Junho Yeo 12 Sep 6, 2021