Skip to content

unirakun/hoc-react-loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hoc-react-loader

CircleCI NPM Version Coverage Status

This is a higher order component ("HOC"). It's an advanced pattern used in React that let you reuse code logic, it can be summarized as a component factory. It improves isolation, interoperability and maintainability of your code base.

hoc-react-loader's purpose is to call a load callback passed through the props of a component only once (at componentWillMount). This is convenient to load data from a backend for instance. The component shows a loading indicator when it's waiting for the props to be defined. The loading indicator can be changed easily.

Example

import React from 'react'
import loader from '@hoc-react-loader/core'

const Component = ({ data }) => <div>Component {JSON.stringify(data)}</div>
const load = props => console.log(props)

export default loader({ print: ['data'], load })(Component)

In this example load will be called at first mount, then the wrapped Component will be printed only if props.data is truthy.

load function can be the moment you ask for your API data.

Demos

You can test some examples here.

About uni rakun

uni rakun is created by two passionate french developers.

Do you want to contact them ? Go to their website

Guillaume CRESPEL Fabien JUIF