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

You can also add an optional configuration object as second parameter.

Parameter	Needed	Default value	Description
`Loader`	no	`null`	A component that will be display depending on `prop` value.
`prop`	no	`loaded`	A prop name that determine when to display the `Loader` component. The prop value should be a Boolean.
`wait`	no	`true`	Set to `false` if you don't want to wait for the `prop` to be set.

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

Advanced example with `redux` :

Component.js

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

Loader.js

import React from 'react'
export default () => <div>loading...</div>

Container.js

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

const mapStateToProps = ({ text, isTextFetched }) => {
  return {
    text,
    fetched: isTextFetched,
  }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(reactLoader(Component, {
  Loader,
  prop: 'fetched'
}))

The Loader component will displayed instead of Component as long as prop value is false.

hoc-react-loader