Justin-lu/react-loadmask

loading mask for react

react-loadmask

loading mask for react

Getting Started

Install it via npm:

npm install react-loadmask

1. Add this style to you css/scss

2. Add this js to you porject

import LoadMask from 'react-loadmask';

Using in redux

You can define a reduer like this

export function todos(state , action) {
  switch (action.type) {
  case REQUEST_TODO:
    return Object.assign({}, state, { isLoading: true });
  case RECEIVE_ACTIVATED_DEVICES:
    return Object.assign({}, state, { isLoading: false });
  default:
    return state;
  }
}

Add LoadMask to your compoments as a wrapper

<LoadMask dataLength={todos.length} isLoading={todos.isLoading}>
  <div>
    <p>I'm todo list</p>
  </div>
</LoadMask>

Now, you compoments will auto should loading mask when you are make an ajax request

License

MIT