semantic-react-redux v1.0.5

semantic-react-redux

Just a collection of components for projects using semantic-ui, redux, and react.

loaderReducer

LoaderReducer maintains an array of named transactions awaiting fulfillment.

Usage

Add it to your createStore call. For example:

import {createStore} from 'redux';
import {loaderReducer} from 'semantic-react-redux';
import * as reducers from './reducers'  //your object of reducers

const app = combineReducers({loaderReducer, ...reducers});
const store = createStore(app);

Loader

Loader provides a semantic loader, that listens to a given name on loadingReducer. If the name is present, then the semantic-ui loader will be active.

Usage

<Loader name={Actions.FETCH_ACTION}>
  <div className="ui stackable two column grid">
    {...data}
  </div>
</Loader>

LoaderTransactor

LoaderTransactor provides an easy way to combine an ajax transaction with a loading message, which Loader can listen to.

actions.js

const receiver = ({result}) => ({
  type: RECEIVE_DATA,
  ...result,
});

const actionCreator = () =>
  loadingTransact(
    route,
    receiver,
    FETCH_ACTION      // same name that <Loader /> listens to.
  );

DimensionProvider

The child of DimensionProvider will receive its width and height as props. DimensionProvider encapsulates a window resize listener, which recalculates the dimensions of the contents when the user stops resizing the window.