redux-source-with-block-ui

< Back to Project WebCube

A React higher-order component for displaying React Block UI based on Redux states maintained by redux-source automatically

npm install --save redux-source-with-block-ui

It works great with redux-source-with-notify

Examples

• webcube-examples

Get Started

For redux-source's example:

// shopManageApp/containers/ShopList.js
import { connect } from 'react-redux';
import connectSource from 'redux-source-connect';
import withBlockUi from 'redux-source-with-block-ui';
import 'react-block-ui/style.css';
import { Loader } from 'react-loaders';
import 'loaders.css/src/animations/line-scale.scss';
 
import { actions, shopsSource } from '../ducks/shops';
 
 
@connectSource(shopsSource, {
  slice: state => state.shops,
})
@connect({
  actions,
})
@withBlockUi({
  loader: <Loader type="line-scale" color="#8159bb" />,
  keepInView = true, // optional
  sourceStateName = 'source', // optional
  ...otherReactBlockUiProps, // optional
})
export default class ShopList extends PureComponent {

Or you can create a custom wrapper:

// shopManageApp/hoc/withBlockUi.js
import React from 'react';
import originWithBlockUi from 'redux-source-with-block-ui';
import 'react-block-ui/style.css';
import { Loader } from 'react-loaders';
import 'loaders.css/src/animations/line-scale.scss';
 
export default function withBlockUi(config = {}) {
  const { keepInView, sourceStateName, ...otherProps } = config;
  return originWithBlockUi({
    ...otherProps,
    loader: <Loader type="line-scale" color="#8159bb" />,
    keepInView,
    sourceStateName,
  });
}

// shopManageApp/containers/ShopList.js
import { connect } from 'react-redux';
import connectSource from 'redux-source-connect';
 
import withBlockUi from '../hoc/withBlockUi'
import { actions, shopsSource } from '../ducks/shops';
 
@connectSource(shopsSource, {
  slice: state => state.shops,
})
@connect({
  actions,
})
@withBlockUi()
export default class ShopList extends PureComponent {