Package Exports

hoc-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hoc-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-loader

What

This is a high order component (HOC).

This HOC purpose is to call a load callback passes in props of a component only once (at componentWillMount).

This is convenient to load data from a backend for instance.

install

npm i --save hoc-react-loader

use

You have to wrap your component, and give a load props to that resulted component.

Example with redux :

Component.js

import React from 'react'
export default ({ text }) => <div>{text}</div>

Container.js

import { connect } from 'react-redux'
import reactLoader from 'hoc-react-loader'
import { fetchText } from '%%your_actions%%'
import Component from './Component'

const mapStateToProps = ({ text }) => {
  return {
    text,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    load: () => dispatch(fetchText()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(reactLoader(Component))

The fetchText may be an redux-thunk action that fetch a text to a backend, and update the state : state.text.